/* SOLO ESTRUCTURA - SIN COLORES */ body.basic_theme_pro #sidebar.sidebar-new-design .nav-tabs > li > a { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; height: 70px !important; padding: 6px 4px !important; } body.basic_theme_pro #sidebar.sidebar-new-design .nav-tabs > li > a .text { font-size: 11px !important; } body.basic_theme_pro #sidebar.sidebar-new-design .nav-tabs > li > a { border-bottom: 0.7px solid rgba(227,227,227,0.5) !important; } body.basic_theme_pro #sidebar.sidebar-new-design .nav-tabs > li.active > a { border-bottom: 3px solid #fff !important; } /* Tamaño de iconos New Design dentro de Theme Pro */ body.basic_theme_pro #sidebar.sidebar-new-design .nav-tabs > li > a > i { display: block !important; font-size: 20px !important; line-height: 1 !important; margin: 0 auto 6px !important; } /* ===== Theme Pro - Global modal/dialog refinement ===== */ /* Menos redondeo en ventanas */ body.basic_theme_pro .modal-content, body.basic_theme_pro .ui-dialog.ui-widget-content { border-radius: 10px !important; } /* Footer transparente */ body.basic_theme_pro .modal-footer, body.basic_theme_pro .ui-dialog-buttonpane { background: transparent !important; } /* Evitar esquinas demasiado redondas en header/footer */ body.basic_theme_pro .modal-header, body.basic_theme_pro .modal-footer, body.basic_theme_pro .ui-dialog-titlebar, body.basic_theme_pro .ui-dialog-buttonpane { border-radius: 0 !important; } /* Solo móvil: reducir tamaño respecto a bordes de pantalla */ @media (max-width: 767px) { body.basic_theme_pro .modal-dialog, body.basic_theme_pro .ui-dialog { width: 94vw !important; max-width: 94vw !important; margin-left: auto !important; margin-right: auto !important; } body.basic_theme_pro .modal-body { max-height: 82vh !important; overflow-y: auto !important; } } /* ===== THEME PRO - MODAL HEADER FULL WIDTH ===== */ /* Header ocupa todo el ancho y se integra con la ventana */ body.basic_theme_pro .modal-content { overflow: hidden !important; /* importante para que el header respete bordes */ } body.basic_theme_pro .modal-header { width: 100% !important; margin: 0 !important; border-radius: 10px 10px 0 0 !important; /* igual que ventana */ } /* Asegurar que el contenedor no meta padding lateral */ body.basic_theme_pro .modal-content { padding: 0 !important; } /* Restaurar padding interno del contenido */ body.basic_theme_pro .modal-body, body.basic_theme_pro .modal-footer { padding: 15px !important; } /* Icono del título en blanco */ body.basic_theme_pro .modal-header i, body.basic_theme_pro .modal-header .icon, body.basic_theme_pro .modal-header .modal-title i { color: #fff !important; } /* ===== THEME PRO - REMOVE MODAL EDGE GAP/BORDER ===== */ body.basic_theme_pro .modal-content { border: 0 !important; box-shadow: 0 12px 35px rgba(0,0,0,0.25) !important; overflow: hidden !important; } body.basic_theme_pro .modal-header { margin: 0 !important; border: 0 !important; border-bottom: 0 !important; border-radius: 10px 10px 0 0 !important; background-clip: padding-box !important; } body.basic_theme_pro .modal-header::before, body.basic_theme_pro .modal-header::after { background: transparent !important; border: 0 !important; } /* ===== THEME PRO - CLOSE BUTTON WHITE ===== */ body.basic_theme_pro .modal-header .close, body.basic_theme_pro .modal-header .btn-close, body.basic_theme_pro .modal-header button.close, body.basic_theme_pro .modal-header .close i, body.basic_theme_pro .modal-header .btn-close i { color: #fff !important; opacity: 1 !important; } /* Para Bootstrap 5 (icono SVG) */ body.basic_theme_pro .modal-header .btn-close { filter: invert(1) brightness(2) !important; } /* ===== MOBILE ONLY: DATERANGEPICKER SCROLL SAFE ===== */ @media (max-width: 767px) { .daterangepicker { max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; z-index: 99999 !important; } .daterangepicker .drp-buttons { position: sticky !important; bottom: 0 !important; z-index: 5 !important; } } /* ===== MOBILE ONLY: FORCE DATERANGEPICKER INSIDE VIEWPORT ===== */ @media (max-width: 767px) { .daterangepicker { position: fixed !important; top: 8px !important; bottom: 8px !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow-y: auto !important; overflow-x: hidden !important; } .daterangepicker.opensleft, .daterangepicker.opensright, .daterangepicker.openscenter { left: 8px !important; right: 8px !important; } .daterangepicker:before, .daterangepicker:after { display: none !important; } } /* ===== MOBILE REDESIGN: DATERANGEPICKER ===== */ @media (max-width: 767px) { .daterangepicker { position: fixed !important; top: 8px !important; bottom: 8px !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; z-index: 99999 !important; border-radius: 18px !important; padding: 14px !important; box-shadow: 0 18px 50px rgba(0,0,0,0.28) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; animation: mobileDatePickerIn .22s ease-out !important; } @keyframes mobileDatePickerIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .daterangepicker:before, .daterangepicker:after { display: none !important; } .daterangepicker .ranges { float: none !important; width: 100% !important; margin: 0 0 12px 0 !important; } .daterangepicker .ranges ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .daterangepicker .ranges li { border-radius: 12px !important; padding: 9px 6px !important; text-align: center !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 !important; transition: transform .14s ease, opacity .14s ease !important; } .daterangepicker .ranges li:active { transform: scale(0.97) !important; } .daterangepicker .drp-calendar { float: none !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin-bottom: 12px !important; } .daterangepicker .drp-calendar.left::before { content: "Desde"; display: block; font-weight: 800; font-size: 13px; margin: 8px 0 7px; } .daterangepicker .drp-calendar.right::before { content: "Hasta"; display: block; font-weight: 800; font-size: 13px; margin: 8px 0 7px; } .daterangepicker .calendar-table { width: 100% !important; border-radius: 14px !important; overflow: hidden !important; } .daterangepicker .calendar-table table { width: 100% !important; } .daterangepicker td, .daterangepicker th { min-width: 34px !important; height: 34px !important; line-height: 34px !important; border-radius: 10px !important; } .daterangepicker .calendar-time { display: flex !important; justify-content: center !important; gap: 8px !important; margin: 10px 0 4px !important; } .daterangepicker .calendar-time select { min-height: 38px !important; border-radius: 10px !important; padding: 5px 9px !important; font-size: 13px !important; font-weight: 600 !important; } .daterangepicker .drp-buttons { position: sticky !important; bottom: -14px !important; z-index: 5 !important; display: flex !important; gap: 8px !important; justify-content: flex-end !important; padding: 12px 0 0 !important; margin-top: 8px !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .daterangepicker .drp-buttons .btn { min-height: 40px !important; border-radius: 12px !important; padding: 8px 15px !important; font-size: 13px !important; font-weight: 700 !important; } } /* ===== MOBILE DATERANGEPICKER: REMOVE LABELS + COMPACT TIME ===== */ @media (max-width: 767px) { .daterangepicker .drp-calendar.left::before, .daterangepicker .drp-calendar.right::before { content: none !important; display: none !important; } .daterangepicker .calendar-time { gap: 2px !important; column-gap: 2px !important; justify-content: center !important; align-items: center !important; } .daterangepicker .calendar-time select { margin: 0 2px !important; } .daterangepicker .calendar-time .hourselect, .daterangepicker .calendar-time .minuteselect, .daterangepicker .calendar-time .ampmselect { margin-left: 1px !important; margin-right: 1px !important; } } /* ===== MOBILE DATERANGEPICKER: REMOVE LEFT BORDER LINE ===== */ @media (max-width: 767px) { .daterangepicker, .daterangepicker .drp-calendar, .daterangepicker .calendar-table, .daterangepicker .calendar-table table, .daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right { border-left: 0 !important; } .daterangepicker .drp-calendar { border: 0 !important; } } /* ===== MOBILE DATERANGEPICKER: FINAL CENTERED COMPACT WIDTH ===== */ @media (max-width: 767px) { .daterangepicker { position: fixed !important; left: 24px !important; right: 24px !important; width: auto !important; min-width: 0 !important; max-width: none !important; transform: none !important; } } /* ===== MOBILE DATERANGEPICKER: FOOTER STACK ORDER ===== */ @media (max-width: 767px) { .daterangepicker .drp-buttons { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .daterangepicker .drp-selected { order: 1 !important; width: 100% !important; text-align: center !important; margin-bottom: 2px !important; } .daterangepicker .drp-buttons .btn { order: 2 !important; } } /* ===== MOBILE DATERANGEPICKER: FOOTER BUTTONS HORIZONTAL ===== */ @media (max-width: 767px) { .daterangepicker .drp-buttons { text-align: center !important; } .daterangepicker .drp-buttons .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 110px !important; margin: 0 4px !important; } } /* ===== MOBILE DATERANGEPICKER: FORCE CANCEL/APPLY SAME ROW ===== */ @media (max-width: 767px) { .daterangepicker .drp-buttons { display: block !important; text-align: center !important; } .daterangepicker .drp-selected { display: block !important; width: 100% !important; margin-bottom: 10px !important; text-align: center !important; } .daterangepicker .drp-buttons .cancelBtn, .daterangepicker .drp-buttons .applyBtn { display: inline-flex !important; vertical-align: middle !important; width: 125px !important; min-width: 125px !important; height: 38px !important; min-height: 38px !important; margin: 0 5px !important; align-items: center !important; justify-content: center !important; } } /* ===== MOBILE DATERANGEPICKER: MORE COMPACT WINDOW ===== */ @media (max-width: 767px) { .daterangepicker { left: 32px !important; right: 32px !important; width: auto !important; max-width: none !important; padding: 10px !important; border-radius: 16px !important; } .daterangepicker .ranges { margin-bottom: 8px !important; } .daterangepicker .ranges ul { gap: 5px !important; } .daterangepicker .ranges li { padding: 7px 5px !important; font-size: 11.5px !important; } .daterangepicker .drp-calendar { margin-bottom: 6px !important; } .daterangepicker td, .daterangepicker th { min-width: 30px !important; height: 30px !important; line-height: 30px !important; } .daterangepicker .calendar-time { margin: 6px 0 2px !important; } .daterangepicker .drp-buttons { padding-top: 8px !important; margin-top: 4px !important; } } /* ===== MOBILE DATERANGEPICKER: MODAL-LIKE LOOK ===== */ @media (max-width: 767px) { .daterangepicker { border-radius: 10px !important; box-shadow: 0 18px 45px rgba(0,0,0,0.32) !important; border: 0 !important; } body:has(.daterangepicker[style*="display: block"])::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 99998; pointer-events: none; } .daterangepicker { z-index: 99999 !important; } } /* ===== MOBILE DATERANGEPICKER: STRONGER SHADOW ===== */ @media (max-width: 767px) { .daterangepicker { box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 22px 60px rgba(0,0,0,0.42), 0 10px 28px rgba(0,0,0,0.28) !important; } } /* ========================================================= NEW DESIGN — CENTER MODAL FOOTER BUTTONS ========================================================= */ .modal .modal-footer .buttons { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; text-align: center !important; } .modal .modal-footer .buttons .btn, .modal .modal-footer .buttons .btn-action { float: none !important; } /* ========================================================= MOBILE GLOBAL — SAFE MODAL VIEWPORT FIT Basic / Basic New Tabs / Theme Pro / New Design ========================================================= */ @media (max-width: 767px) { .modal-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 12px auto !important; } .modal-content { max-height: calc(100dvh - 24px) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .modal-header, .modal-footer { flex: 0 0 auto !important; } .modal-body { flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } } /* ========================================================= MOBILE — DASHBOARD FULL MODAL VIEWPORT FIX ========================================================= */ @media (max-width: 767px) { #dashboard.modal-dialog.modal-full { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 12px auto !important; top: 0 !important; } #dashboard.modal-dialog.modal-full .modal-content { max-height: calc(100dvh - 24px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #dashboard.modal-dialog.modal-full .modal-body { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } } /* ========================================================= DASHBOARD MODAL — GLOBAL VIEWPORT FIT Mobile / Tablet / Desktop ========================================================= */ #dashboard.modal-dialog.modal-full { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; margin: 12px auto !important; top: 0 !important; } #dashboard.modal-dialog.modal-full .modal-content { max-height: calc(100dvh - 24px) !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #dashboard.modal-dialog.modal-full .modal-body { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } /* ========================================================= DASHBOARD MODAL — MOBILE EXTRA VIEWPORT STABILIZER ========================================================= */ @media (max-width: 767px) { #dashboard.modal-dialog.modal-full { position: fixed !important; inset: 12px !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; transform: none !important; } #dashboard.modal-dialog.modal-full .modal-content { height: 100% !important; max-height: 100% !important; } #dashboard.modal-dialog.modal-full .modal-body { flex: 1 1 auto !important; max-height: none !important; } } /* ========================================================= DASHBOARD MODAL — MOBILE SCROLL END FIX ========================================================= */ @media (max-width: 767px) { #dashboard.modal-dialog.modal-full { position: fixed !important; left: 12px !important; right: 12px !important; top: 12px !important; bottom: 12px !important; width: auto !important; max-width: none !important; height: calc(100svh - 24px) !important; max-height: calc(100svh - 24px) !important; margin: 0 !important; transform: none !important; } #dashboard.modal-dialog.modal-full .modal-content { height: 100% !important; max-height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #dashboard.modal-dialog.modal-full .modal-header { flex: 0 0 auto !important; } #dashboard.modal-dialog.modal-full .modal-body { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; } #dashboard.modal-dialog.modal-full .modal-body > .container-fluid { min-height: 0 !important; padding-bottom: 36px !important; } } /* ========================================================= NEW DESIGN — SIDEBAR THEME SWITCH VISUAL FIX ========================================================= */ .sidebar-theme-switch-item .sidebar-theme-switch-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; } .sidebar-theme-switch-item .sidebar-theme-slider { width: 34px !important; height: 20px !important; border-radius: 999px !important; background: #16b5d0 !important; display: block !important; position: relative !important; flex: 0 0 auto !important; } .sidebar-theme-switch-item .sidebar-theme-slider:before { width: 14px !important; height: 14px !important; left: 3px !important; top: 3px !important; background: #fff !important; border-radius: 50% !important; transform: none !important; } .sidebar-theme-switch-item .sidebar-theme-switch-icon input:checked + .sidebar-theme-slider:before { transform: translateX(14px) !important; } #sidebar.collapsed .sidebar-theme-switch-item, .sidebar-new-design-layout.collapsed .sidebar-theme-switch-item { justify-content: center !important; } #sidebar.collapsed .sidebar-theme-switch-item .sidebar-theme-switch-icon, .sidebar-new-design-layout.collapsed .sidebar-theme-switch-item .sidebar-theme-switch-icon { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } /* ========================================================= NEW DESIGN — SIDEBAR FOOTER PERFECT ALIGNMENT ========================================================= */ /* Cuenta / Idioma / Switch / Logout */ body.new-design-active .sidebar-menu-footer .sidebar-menu-item, body.new-design-active .sidebar-menu-footer .sidebar-theme-switch-item { display: flex !important; align-items: center !important; gap: 14px !important; } /* Área visual exacta del icono */ body.new-design-active .sidebar-menu-footer .icon, body.new-design-active .sidebar-menu-footer i, body.new-design-active .sidebar-menu-footer .sidebar-theme-switch-icon { width: 18px !important; min-width: 18px !important; max-width: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } /* Quitar flecha del account */ body.new-design-active .sidebar-menu-footer .dropdown-toggle::after, body.new-design-active .sidebar-menu-footer .caret { display: none !important; } /* Switch tamaño final */ body.new-design-active .sidebar-theme-slider { width: 16px !important; height: 10px !important; border-radius: 999px !important; } body.new-design-active .sidebar-theme-slider:before { width: 8px !important; height: 8px !important; left: 1px !important; top: 1px !important; } body.new-design-active .sidebar-theme-switch-icon input:checked + .sidebar-theme-slider:before { transform: translateX(6px) !important; } /* Sidebar colapsado */ body.new-design-active #sidebar.collapsed .sidebar-menu-footer .sidebar-menu-item, body.new-design-active #sidebar.collapsed .sidebar-menu-footer .sidebar-theme-switch-item { justify-content: center !important; gap: 0 !important; } body.new-design-active #sidebar.collapsed .sidebar-menu-footer .text { display: none !important; } /* ========================================================= NEW DESIGN — SIDEBAR FOOTER EXPANDED LEFT/TEXT TIGHTEN ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-menu-item, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-theme-switch-item { gap: 0px !important; padding-left: 17px !important; } body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .icon, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer i, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-theme-switch-icon { margin-left: -4px !important; } /* ========================================================= NEW DESIGN — SIDEBAR FOOTER FINAL MICRO ALIGN ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-menu-item, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-theme-switch-item { gap: 0px !important; padding-left: 17px !important; } body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .icon, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer i, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-theme-switch-icon { margin-left: -10px !important; } /* ========================================================= NEW DESIGN — LANGUAGE + SWITCH ICON SLIGHT SCALE ========================================================= */ /* Bandera idioma ligeramente más grande */ body.new-design-active .sidebar-menu-footer a[data-modal="language-selection"] .icon img { width: 16px !important; height: auto !important; border-radius: 3px !important; display: block !important; } /* Switch ligeramente más grande */ body.new-design-active .sidebar-theme-slider { width: 18px !important; height: 11px !important; } body.new-design-active .sidebar-theme-slider:before { width: 9px !important; height: 9px !important; left: 1px !important; top: 1px !important; } body.new-design-active .sidebar-theme-switch-icon input:checked + .sidebar-theme-slider:before { transform: translateX(7px) !important; } /* ========================================================= NEW DESIGN — SWITCH ORIGINAL LIGHT BLUE ========================================================= */ body.new-design-active .sidebar-theme-switch-icon input:checked + .sidebar-theme-slider { background: #16b5d0 !important; } /* ========================================================= NEW DESIGN — SWITCH HEIGHT +15% ========================================================= */ body.new-design-active .sidebar-theme-slider { height: 13px !important; } body.new-design-active .sidebar-theme-slider:before { top: 2px !important; } /* ========================================================= NEW DESIGN — LANGUAGE ICON RIGHT SHIFT +10% SCALE ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer a[data-modal="language-selection"] .icon img { width: 17.5px !important; margin-left: 3px !important; } /* ========================================================= NEW DESIGN — LANGUAGE + SWITCH TEXT CLOSER TO ICONS ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer a[data-modal="language-selection"] .text, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-theme-switch-item .text { margin-left: -3px !important; } /* ========================================================= NEW DESIGN — LANGUAGE + SWITCH TEXT MICRO ADJUST ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer a[data-modal="language-selection"] .text, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-theme-switch-item .text { margin-left: -1px !important; } /* ========================================================= NEW DESIGN — LANGUAGE + SWITCH TEXT FINAL MICRO TUNE ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer a[data-modal="language-selection"] .text, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer .sidebar-theme-switch-item .text { margin-left: 0px !important; } /* ========================================================= NEW DESIGN — ACCOUNT TEXT FINAL FIX ========================================================= */ body.new-design-active .sidebar-menu-footer .account-title { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; line-height: 1.1 !important; } body.new-design-active .sidebar-menu-footer .account-email { font-size: calc(1em - 2px) !important; font-weight: 400 !important; color: inherit !important; opacity: .55 !important; line-height: 1.1 !important; margin-top: 2px !important; } body.new-design-active .sidebar-menu-footer .account-text-wrapper { overflow: hidden !important; } /* ========================================================= NAVITRAX — NEW DESIGN MAIN SIDEBAR ICON PERFECT ALIGNMENT ========================================================= */ body.new-design-active .sidebar-vertical-menu .sidebar-menu-item i, body.new-design-active .sidebar-vertical-menu .sidebar-menu-item .icon { width: 18px !important; min-width: 18px !important; max-width: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; text-align: center !important; vertical-align: middle !important; flex-shrink: 0 !important; } /* ========================================================= NAVITRAX — NEW DESIGN COLLAPSED SIDEBAR BUTTON WIDTH ========================================================= */ body.new-design-active #sidebar.collapsed .sidebar-menu-item, body.new-design-active .sidebar-new-design-layout.collapsed .sidebar-menu-item { width: calc(100% - 4px) !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================= NAVITRAX — NEW DESIGN COLLAPSED SIDEBAR REAL BUTTON WIDTH FIX ========================================================= */ body.new-design-active #sidebar.collapsed .sidebar-menu-item, body.new-design-active .sidebar-new-design-layout.collapsed .sidebar-menu-item { width: calc(100% - 10px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================= NAVITRAX — NEW DESIGN MAIN SIDEBAR ICON/TEXT SPACING ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-vertical-menu .sidebar-menu-item { display: flex !important; align-items: center !important; gap: 10px !important; } /* ========================================================= NAVITRAX — ADMIN BUTTON +4PX WIDTH WHEN COLLAPSED ========================================================= */ body.new-design-active #sidebar.collapsed .sidebar-vertical-menu > .sidebar-menu-item:first-of-type { width: calc(100% - 8px) !important; } /* ========================================================= NAVITRAX — FOOTER BUTTONS +4PX WIDTH ========================================================= */ body.new-design-active .sidebar-menu-footer .sidebar-menu-item, body.new-design-active .sidebar-menu-footer .sidebar-theme-switch-item { width: calc(100% + 4px) !important; margin-left: -2px !important; margin-right: -2px !important; } /* ========================================================= NAVITRAX — FOOTER REAL WIDTH EXPANSION ========================================================= */ body.new-design-active .sidebar-menu-footer .sidebar-menu-item, body.new-design-active .sidebar-menu-footer .sidebar-theme-switch-item { padding-left: 2px !important; padding-right: 2px !important; margin-left: -2px !important; margin-right: -2px !important; } /* ========================================================= NAVITRAX — FOOTER CONTAINER WIDTH EXPANSION ========================================================= */ body.new-design-active .sidebar-menu-footer { padding-left: 3px !important; padding-right: 3px !important; } /* ========================================================= NAVITRAX — FOOTER BUTTONS ALWAYS VISUALLY WIDER Agranda solo el contenedor visual, no el contenido interno ========================================================= */ body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer > .sidebar-dropdown > .sidebar-menu-item, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer > a.sidebar-menu-item, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer > label.sidebar-menu-item { transform: scaleX(1.035) !important; transform-origin: center center !important; } body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer > .sidebar-dropdown > .sidebar-menu-item > *, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer > a.sidebar-menu-item > *, body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-footer > label.sidebar-menu-item > * { transform: scaleX(0.966) !important; transform-origin: center center !important; } /* ========================================================= NAVITRAX — FOOTER BUTTONS COLLAPSED VISUALLY WIDER Agranda solo el contenedor visual en sidebar colapsado ========================================================= */ body.new-design-active #sidebar.collapsed .sidebar-menu-footer > .sidebar-dropdown > .sidebar-menu-item, body.new-design-active #sidebar.collapsed .sidebar-menu-footer > a.sidebar-menu-item, body.new-design-active #sidebar.collapsed .sidebar-menu-footer > label.sidebar-menu-item { transform: scaleX(1.065) !important; transform-origin: center center !important; } body.new-design-active #sidebar.collapsed .sidebar-menu-footer > .sidebar-dropdown > .sidebar-menu-item > *, body.new-design-active #sidebar.collapsed .sidebar-menu-footer > a.sidebar-menu-item > *, body.new-design-active #sidebar.collapsed .sidebar-menu-footer > label.sidebar-menu-item > * { transform: scaleX(0.939) !important; transform-origin: center center !important; } /* ========================================================= NAVITRAX — FOOTER BUTTONS COLLAPSED REAL WIDTH Aumenta ancho real solo en footer colapsado ========================================================= */ body.new-design-active #sidebar.collapsed .sidebar-menu-footer > .sidebar-dropdown > .sidebar-menu-item, body.new-design-active #sidebar.collapsed .sidebar-menu-footer > a.sidebar-menu-item, body.new-design-active #sidebar.collapsed .sidebar-menu-footer > label.sidebar-menu-item { width: calc(100% - 6px) !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================= NAVITRAX — NEW DESIGN SIDEBAR DIVIDERS FULL WIDTH ========================================================= */ body.new-design-active .sidebar-menu-separator { width: calc(100% + 8px) !important; margin-left: -4px !important; margin-right: -4px !important; } body.new-design-active .sidebar-menu-footer { width: calc(100% + 8px) !important; margin-left: -4px !important; margin-right: -4px !important; } /* ========================================================= NAVITRAX — NEW DESIGN SIDEBAR CENTRAL SCROLL AREA Admin y footer fijos; solo botones centrales hacen scroll ========================================================= */ body.new-design-active .sidebar-vertical-menu { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } body.new-design-active .sidebar-menu-scroll-area { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable !important; -webkit-overflow-scrolling: auto !important; padding-right: 0 !important; } /* Scrollbar limpia y estable */ body.new-design-active .sidebar-menu-scroll-area::-webkit-scrollbar { width: 4px !important; background: transparent !important; } body.new-design-active .sidebar-menu-scroll-area::-webkit-scrollbar-track { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.new-design-active .sidebar-menu-scroll-area::-webkit-scrollbar-thumb, body.new-design-active .sidebar-menu-scroll-area::-webkit-scrollbar-thumb:hover { width: 4px !important; background: rgba(100, 100, 100, 0.52) !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important; } body.new-design-active .sidebar-menu-footer, body.new-design-active .sidebar-menu-separator { flex: 0 0 auto !important; } /* Firefox */ body.new-design-active .sidebar-menu-scroll-area { scrollbar-width: thin !important; scrollbar-color: rgba(100, 100, 100, 0.52) transparent !important; } /* ========================================================= NAVITRAX — MOBILE ONLY EXPANDED SIDEBAR BUTTONS +4PX HEIGHT Solo móvil, solo sidebar expandido. No afecta colapsado/tablet/desktop. ========================================================= */ @media (max-width: 767px) { body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-item, body.new-design-active #sidebar:not(.collapsed) .sidebar-theme-switch-item { padding-top: calc(var(--sidebar-item-padding-y, 0px) + 2px) !important; padding-bottom: calc(var(--sidebar-item-padding-y, 0px) + 2px) !important; } } /* ========================================================= NAVITRAX — MOBILE EXPANDED SIDEBAR REAL HEIGHT FIX Solo móvil + sidebar expandido ========================================================= */ @media (max-width: 767px) { body.new-design-active #sidebar:not(.collapsed) .sidebar-menu-item, body.new-design-active #sidebar:not(.collapsed) .sidebar-theme-switch-item { padding-top: 4px !important; padding-bottom: 4px !important; } } /* ========================================================= NAVITRAX — ADMIN NEW DESIGN FULL WIDTH SEPARATORS ========================================================= */ body.new-design-active.admin-layout #sidebar.sidebar-new-design-layout .sidebar-menu-separator { width: calc(100% + 32px) !important; margin-left: -16px !important; margin-right: -16px !important; } /* ========================================================= NAVITRAX — THEME PRO HEADER ICON CIRCLE SAFE FIT Desktop / Tablet only ========================================================= */ @media (min-width: 768px) { body.basic_theme_pro #header .main-navbar .navbar-nav > li > a > .icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; line-height: 32px !important; padding: 0 !important; margin-left: auto !important; margin-right: auto !important; display: block !important; box-sizing: border-box !important; } body.basic_theme_pro #header .main-navbar .navbar-nav > li > a > .icon:before { line-height: 32px !important; } body.basic_theme_pro #header .main-navbar .navbar-nav > li > a { padding-top: 4px !important; padding-bottom: 4px !important; } } /* ========================================================= NAVITRAX — THEME PRO HEADER REAL ICON FIT Desktop / Tablet only ========================================================= */ @media (min-width: 768px) { body.basic_theme_pro #header .main-navbar .navbar-nav > li > a .icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; max-width: 30px !important; max-height: 30px !important; line-height: 30px !important; font-size: 15px !important; padding: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; } body.basic_theme_pro #header .main-navbar .navbar-nav > li > a .icon:before { width: 30px !important; height: 30px !important; line-height: 30px !important; font-size: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } body.basic_theme_pro #header .main-navbar .navbar-nav > li > a { padding-top: 2px !important; padding-bottom: 2px !important; line-height: 1 !important; text-align: center !important; } } /* ========================================================= NAVITRAX — THEME PRO MOBILE HEADER DRAWER SAFE Visual only: no rompe dropdown Bootstrap ========================================================= */ @media (max-width: 767px) { body.basic_theme_pro #bs-header-navbar-collapse { background: #fff !important; background-color: #fff !important; background-image: none !important; padding: 0 !important; border-top: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav { margin: 0 !important; padding: 0 !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a { min-height: 40px !important; height: 40px !important; padding: 0 18px !important; line-height: 40px !important; background: none !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a .icon, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a .icon:before { background: none !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a .text { font-size: 15px !important; line-height: 40px !important; } } /* ========================================================= NAVITRAX — THEME PRO MOBILE DRAWER COLUMN FIX Corrige grilla/pills sin romper dropdown Bootstrap ========================================================= */ @media (max-width: 767px) { body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav { display: block !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #fff !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li.open > a { width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 18px !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: #222 !important; line-height: 42px !important; text-align: left !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; top: auto !important; right: auto !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a .text { display: inline-block !important; font-size: 15px !important; line-height: 1 !important; color: #222 !important; margin: 0 !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a .icon { display: inline-flex !important; width: 24px !important; min-width: 24px !important; height: 24px !important; line-height: 24px !important; margin: 0 !important; padding: 0 !important; color: #6e42ff !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-radius: 0 !important; box-shadow: none !important; align-items: center !important; justify-content: center !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a .icon:before { color: #6e42ff !important; background: transparent !important; background-color: transparent !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav .open .dropdown-menu > li > a { height: 38px !important; min-height: 38px !important; line-height: 38px !important; padding: 0 18px 0 54px !important; background: transparent !important; color: #333 !important; } } /* ========================================================= NAVITRAX — THEME PRO MOBILE DRAWER LI TRANSPARENT ========================================================= */ @media (max-width: 767px) { body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li.open, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li.active, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li:hover, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li:focus { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a:hover, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a:focus, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li > a:active, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li.open > a, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li.open > a:hover, body.basic_theme_pro #bs-header-navbar-collapse .navbar-nav > li.open > a:focus { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } } /* ========================================================= NAVITRAX — THEME PRO MOBILE DRAWER BACKGROUND REAL FIX ========================================================= */ @media (max-width: 767px) { body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li > a, body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li > a:hover, body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li > a:focus, body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li > a:active, body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li.open > a, body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li.open > a:hover, body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li.open > a:focus { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } } /* ========================================================= NAVITRAX — THEME PRO MOBILE DRAWER COMPACT TEXT ========================================================= */ @media (max-width: 767px) { body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li > a, body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li.open > a { height: 34px !important; min-height: 34px !important; line-height: 34px !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 10px !important; } body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li > a .text { font-size: 13px !important; line-height: 1 !important; } body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav > li > a .icon { width: 20px !important; min-width: 20px !important; height: 20px !important; line-height: 20px !important; font-size: 16px !important; } } /* ========================================================= NAVITRAX — THEME PRO MOBILE INNER DROPDOWN COMPACT ========================================================= */ @media (max-width: 767px) { body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav .open .dropdown-menu > li > a { height: 32px !important; min-height: 32px !important; line-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px !important; } body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav .open .dropdown-menu > li > a .text { font-size: 13px !important; line-height: 1 !important; } body.basic_theme_pro #header .main-navbar #bs-header-navbar-collapse .navbar-nav .open .dropdown-menu > li > a .icon { width: 18px !important; min-width: 18px !important; height: 18px !important; line-height: 18px !important; font-size: 15px !important; } } /* ========================================================= NAVITRAX — THEME PRO SURFACE DUO COLLAPSE CLOSED FIX ========================================================= */ @media (max-width: 767px) { body.basic_theme_pro #header #bs-header-navbar-collapse:not(.in) { display: none !important; height: 0 !important; overflow: hidden !important; } body.basic_theme_pro #header #bs-header-navbar-collapse.in { display: block !important; height: auto !important; overflow: visible !important; } body.basic_theme_pro #header .navbar-toggle { display: block !important; } } /* ========================================================= NAVITRAX — DESKTOP ONLY SIDEBAR ALIGN FIX Solo desktop. No afecta móvil, tablets ni iPad. ========================================================= */ @media (min-width: 1200px) { /* EXPANDIDO: botón centrado y más ancho */ body.new-design-active #sidebar.sidebar-new-design-layout:not(.collapsed) .sidebar-menu-item { width: calc(100% - 16px) !important; margin-left: 8px !important; margin-right: 8px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; } /* COLAPSADO: botón cuadrado centrado */ body.new-design-active #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-scroll-area { width: 50px !important; padding-left: 0 !important; padding-right: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; } body.new-design-active #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-scroll-area > .sidebar-menu-item { width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 3px !important; padding: 0 !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.new-design-active #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-scroll-area > .sidebar-menu-item .text { display: none !important; } } /* ========================================================= NAVITRAX — NEW DESIGN REAL SMOOTH SIDEBAR Optimización REAL del sidebar ========================================================= */ /* Sidebar */ body.new-design-active #sidebar.sidebar-new-design-layout { transition: width 160ms cubic-bezier(0.2, 0, 0, 1), min-width 160ms cubic-bezier(0.2, 0, 0, 1), max-width 160ms cubic-bezier(0.2, 0, 0, 1) !important; will-change: width; transform: translateZ(0); backface-visibility: hidden; } /* MapWrap */ body.new-design-active #mapWrap { transition: margin-left 160ms cubic-bezier(0.2, 0, 0, 1) !important; will-change: margin-left; transform: translateZ(0); backface-visibility: hidden; } /* Bottom bar */ body.new-design-active #bottombar { transition: left 160ms cubic-bezier(0.2, 0, 0, 1), width 160ms cubic-bezier(0.2, 0, 0, 1) !important; will-change: left, width; transform: translateZ(0); } /* Sidebar content */ body.new-design-active #sidebar-content, body.new-design-active #sidebar-content-toggle-btn { transition: left 160ms cubic-bezier(0.2, 0, 0, 1) !important; will-change: left; transform: translateZ(0); } /* Texto sidebar */ body.new-design-active .sidebar-menu-item .text, body.new-design-active .sidebar-logo { transition: opacity 100ms linear !important; } /* Móvil/tablet: evitar animaciones pesadas del mapa */ @media (max-width: 1199px) { body.new-design-active #mapWrap, body.new-design-active #bottombar, body.new-design-active #sidebar-content, body.new-design-active #sidebar-content-toggle-btn { transition: none !important; } body.new-design-active #sidebar.sidebar-new-design-layout { transition: width 140ms cubic-bezier(0.2, 0, 0, 1), min-width 140ms cubic-bezier(0.2, 0, 0, 1), max-width 140ms cubic-bezier(0.2, 0, 0, 1) !important; } } /* ========================================================= NAVITRAX — MOBILE SIDEBAR REAL MOTION OVERRIDE ========================================================= */ @media (max-width: 1199px) { body.new-design-active #sidebar.sidebar-new-design-layout { transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1), min-width 220ms cubic-bezier(0.16, 1, 0.3, 1), max-width 220ms cubic-bezier(0.16, 1, 0.3, 1) !important; } body.new-design-active #sidebar.sidebar-new-design-layout .sidebar-menu-item .text, body.new-design-active #sidebar.sidebar-new-design-layout .sidebar-logo { transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important; } body.new-design-active #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item .text, body.new-design-active #sidebar.sidebar-new-design-layout.collapsed .sidebar-logo { opacity: 0 !important; transform: translateX(-8px) !important; } body.new-design-active #sidebar.sidebar-new-design-layout:not(.collapsed) .sidebar-menu-item .text, body.new-design-active #sidebar.sidebar-new-design-layout:not(.collapsed) .sidebar-logo { opacity: 1 !important; transform: translateX(0) !important; } } /* RESTORE ORIGINAL WIDTH FOR DEVICE WIDGET */ body.new-design-active #widgets .widget.widget-device { width: 330px !important; min-width: 330px !important; max-width: 330px !important; } body.new-design-active #widgets .widget.widget-device .widget-body { max-height: 130px !important; overflow-y: auto !important; } /* NAVITRAX DEVICE WIDGET ORIGINAL ROW LAYOUT */ body.new-design-active #widgets .widget.widget-device { width: 330px !important; min-width: 330px !important; max-width: 330px !important; } body.new-design-active #widgets .widget.widget-device .navitrax-device-original-rows { padding: 8px 12px 10px !important; max-height: 130px !important; overflow-y: auto !important; } body.new-design-active #widgets .widget.widget-device .device-row { display: grid !important; grid-template-columns: 104px 1fr !important; gap: 6px !important; align-items: start !important; padding: 4px 0 !important; border-bottom: 1px solid rgba(0,0,0,.12) !important; font-size: 12px !important; line-height: 1.25 !important; } body.new-design-active #widgets .widget.widget-device .device-row:last-child { border-bottom: 0 !important; } body.new-design-active #widgets .widget.widget-device .device-label { display: flex !important; align-items: center !important; gap: 5px !important; color: rgba(0,0,0,.68) !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.new-design-active #widgets .widget.widget-device .device-label i { font-size: 12px !important; color: rgba(0,0,0,.65) !important; } body.new-design-active #widgets .widget.widget-device .device-value { color: rgba(0,0,0,.82) !important; font-weight: 400 !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: normal !important; overflow-wrap: anywhere !important; } body.new-design-active.is-dark #widgets .widget.widget-device .device-row { border-bottom-color: rgba(255,255,255,.14) !important; } body.new-design-active.is-dark #widgets .widget.widget-device .device-label, body.new-design-active.is-dark #widgets .widget.widget-device .device-label i { color: rgba(255,255,255,.68) !important; } body.new-design-active.is-dark #widgets .widget.widget-device .device-value { color: rgba(255,255,255,.88) !important; } /* NAVITRAX DEVICE WIDGET - ADDRESS WRAP FIX */ body.new-design-active #widgets .widget.widget-device .device-row { grid-template-columns: 106px minmax(0, 1fr) !important; overflow: visible !important; } body.new-design-active #widgets .widget.widget-device .device-row-address { align-items: start !important; } body.new-design-active #widgets .widget.widget-device .device-label { gap: 0 !important; } body.new-design-active #widgets .widget.widget-device .device-row-address .device-value, body.new-design-active #widgets .widget.widget-device .device-row-address .device-value span[data-device="address"] { display: block !important; width: 100% !important; max-width: 100% !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; overflow: visible !important; text-overflow: unset !important; line-height: 1.3 !important; } body.new-design-active #widgets .widget.widget-device .navitrax-device-original-rows { overflow-x: hidden !important; overflow-y: auto !important; } body.new-design-active #widgets .widget.widget-device .device-value .preview { float: right !important; margin-left: 4px !important; } /* NAVITRAX - UNIFIED WIDGET TONES */ body.new-design-active #widgets .widget:not(.widget-device) { font-size: 12px !important; color: rgba(0,0,0,.82) !important; } body.new-design-active #widgets .widget:not(.widget-device) .widget-title { font-size: 13px !important; font-weight: 500 !important; color: rgba(0,0,0,.86) !important; } body.new-design-active #widgets .widget:not(.widget-device) .widget-title i, body.new-design-active #widgets .widget:not(.widget-device) .widget-title .icon { color: rgba(0,0,0,.72) !important; } body.new-design-active #widgets .widget:not(.widget-device) .widget-body, body.new-design-active #widgets .widget:not(.widget-device) table, body.new-design-active #widgets .widget:not(.widget-device) td { font-size: 12px !important; color: rgba(0,0,0,.78) !important; } body.new-design-active #widgets .widget:not(.widget-device) table td { padding: 4px 6px !important; border-color: rgba(0,0,0,.12) !important; } body.new-design-active #widgets .widget:not(.widget-device) table td:first-child { color: rgba(0,0,0,.62) !important; font-weight: 400 !important; } body.new-design-active #widgets .widget:not(.widget-device) table td:last-child { color: rgba(0,0,0,.82) !important; font-weight: 400 !important; } /* Dark */ body.new-design-active.is-dark #widgets .widget:not(.widget-device) { color: rgba(255,255,255,.84) !important; } body.new-design-active.is-dark #widgets .widget:not(.widget-device) .widget-title { color: rgba(255,255,255,.88) !important; } body.new-design-active.is-dark #widgets .widget:not(.widget-device) .widget-title i, body.new-design-active.is-dark #widgets .widget:not(.widget-device) .widget-title .icon { color: rgba(255,255,255,.72) !important; } body.new-design-active.is-dark #widgets .widget:not(.widget-device) .widget-body, body.new-design-active.is-dark #widgets .widget:not(.widget-device) table, body.new-design-active.is-dark #widgets .widget:not(.widget-device) td { color: rgba(255,255,255,.80) !important; } body.new-design-active.is-dark #widgets .widget:not(.widget-device) table td { border-color: rgba(255,255,255,.14) !important; } body.new-design-active.is-dark #widgets .widget:not(.widget-device) table td:first-child { color: rgba(255,255,255,.62) !important; } body.new-design-active.is-dark #widgets .widget:not(.widget-device) table td:last-child { color: rgba(255,255,255,.86) !important; } /* ========================================================= NAVITRAX - WIDGET HEADERS REFINED ========================================================= */ body.new-design-active #widgets .widget .widget-heading { display: flex !important; align-items: center !important; min-height: 42px !important; padding: 0 12px !important; } body.new-design-active #widgets .widget .widget-title { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* ICONOS HEADER */ body.new-design-active #widgets .widget .widget-title i, body.new-design-active #widgets .widget .widget-title .icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; line-height: 1 !important; color: var(--primary-color) !important; } /* ACCIONES HEADER */ body.new-design-active #widgets .widget .widget-actions { display: flex !important; align-items: center !important; gap: 6px !important; } /* DARK MODE */ body.new-design-active.is-dark #widgets .widget .widget-title { color: rgba(255,255,255,.92) !important; } body.new-design-active.is-dark #widgets .widget .widget-title i, body.new-design-active.is-dark #widgets .widget .widget-title .icon { color: var(--primary-color) !important; } /* ========================================================= NAVITRAX - FORCE WIDGET HEADER ALIGNMENT + PRIMARY ICONS ========================================================= */ /* HEADER GENERAL */ body.new-design-active #widgets .widget-heading { display: flex !important; align-items: center !important; min-height: 42px !important; padding: 0 12px !important; } /* TODOS LOS TITULOS */ body.new-design-active #widgets .widget-heading .widget-title, body.new-design-active #widgets .widget-heading .title, body.new-design-active #widgets .widget-heading h3, body.new-design-active #widgets .widget-heading h4 { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.1 !important; color: rgba(0,0,0,.88) !important; } /* DARK */ body.new-design-active.is-dark #widgets .widget-heading .widget-title, body.new-design-active.is-dark #widgets .widget-heading .title, body.new-design-active.is-dark #widgets .widget-heading h3, body.new-design-active.is-dark #widgets .widget-heading h4 { color: rgba(255,255,255,.92) !important; } /* TODOS LOS ICONOS */ body.new-design-active #widgets .widget-heading i, body.new-design-active #widgets .widget-heading .icon, body.new-design-active #widgets .widget-heading [class^="icon-"], body.new-design-active #widgets .widget-heading [class*=" icon-"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--primary-color) !important; font-size: 13px !important; line-height: 1 !important; opacity: 1 !important; } /* ACCIONES */ body.new-design-active #widgets .widget-heading .widget-actions { display: flex !important; align-items: center !important; gap: 5px !important; } /* WIDGET VENCIMIENTO */ body.new-design-active #widgets .widget-expiration .widget-title, body.new-design-active #widgets .widget-expiration .title, body.new-design-active #widgets .widget-expiration h3, body.new-design-active #widgets .widget-expiration h4 { color: #fff !important; } body.new-design-active #widgets .widget-expiration i, body.new-design-active #widgets .widget-expiration .icon, body.new-design-active #widgets .widget-expiration [class^="icon-"], body.new-design-active #widgets .widget-expiration [class*=" icon-"] { color: #fff !important; } /* NAVITRAX - FORCE ALL WIDGET HEADER TITLES + ICON COLORS */ /* Header alignment */ body.new-design-active #widgets .widget > .widget-heading { display: flex !important; align-items: center !important; } /* Title alignment + stronger weight */ body.new-design-active #widgets .widget > .widget-heading > .widget-title { display: flex !important; align-items: center !important; gap: 7px !important; font-weight: 700 !important; font-size: 13px !important; line-height: 1 !important; color: rgba(0,0,0,.88) !important; } /* Dark title */ body.new-design-active.is-dark #widgets .widget > .widget-heading > .widget-title { color: rgba(255,255,255,.92) !important; } /* Icon element */ body.new-design-active #widgets .widget > .widget-heading > .widget-title > i, body.new-design-active #widgets .widget > .widget-heading > .widget-title > span[class^="icon-"], body.new-design-active #widgets .widget > .widget-heading > .widget-title > span[class*=" icon-"], body.new-design-active #widgets .widget > .widget-heading > .widget-title > .icon { color: var(--primary-color) !important; font-size: 13px !important; line-height: 1 !important; opacity: 1 !important; } /* Icon font pseudo-elements */ body.new-design-active #widgets .widget > .widget-heading > .widget-title > i:before, body.new-design-active #widgets .widget > .widget-heading > .widget-title > .icon:before, body.new-design-active #widgets .widget > .widget-heading > .widget-title > [class^="icon-"]:before, body.new-design-active #widgets .widget > .widget-heading > .widget-title > [class*=" icon-"]:before { color: var(--primary-color) !important; opacity: 1 !important; } /* Widget actions should not break title alignment */ body.new-design-active #widgets .widget > .widget-heading > .widget-title > .widget-actions { display: inline-flex !important; align-items: center !important; gap: 5px !important; line-height: 1 !important; } /* Expiration widget: white title/icon because header is red */ body.new-design-active #widgets .widget.widget-expiration > .widget-heading > .widget-title, body.new-design-active #widgets .widget.widget-expiration > .widget-heading > .widget-title * { color: #fff !important; } body.new-design-active #widgets .widget.widget-expiration > .widget-heading > .widget-title i:before, body.new-design-active #widgets .widget.widget-expiration > .widget-heading > .widget-title .icon:before, body.new-design-active #widgets .widget.widget-expiration > .widget-heading > .widget-title [class^="icon-"]:before, body.new-design-active #widgets .widget.widget-expiration > .widget-heading > .widget-title [class*=" icon-"]:before { color: #fff !important; } /* ========================================================= FORCE PRIMARY COLOR ON ALL WIDGET HEADER ICONS ========================================================= */ /* FONT ICONS */ body.new-design-active #widgets .widget .widget-heading .widget-title i, body.new-design-active #widgets .widget .widget-heading .widget-title i:before, body.new-design-active #widgets .widget .widget-heading .widget-title .icon, body.new-design-active #widgets .widget .widget-heading .widget-title .icon:before, body.new-design-active #widgets .widget .widget-heading .widget-title [class^="icon-"], body.new-design-active #widgets .widget .widget-heading .widget-title [class^="icon-"]:before, body.new-design-active #widgets .widget .widget-heading .widget-title [class*=" icon-"], body.new-design-active #widgets .widget .widget-heading .widget-title [class*=" icon-"]:before { color: var(--primary-color) !important; opacity: 1 !important; } /* SVG ICONS */ body.new-design-active #widgets .widget .widget-heading .widget-title svg, body.new-design-active #widgets .widget .widget-heading .widget-title svg path { fill: var(--primary-color) !important; color: var(--primary-color) !important; stroke: var(--primary-color) !important; } /* EXPIRATION WIDGET KEEP WHITE */ body.new-design-active #widgets .widget.widget-expiration .widget-title i, body.new-design-active #widgets .widget.widget-expiration .widget-title i:before, body.new-design-active #widgets .widget.widget-expiration .widget-title .icon, body.new-design-active #widgets .widget.widget-expiration .widget-title .icon:before, body.new-design-active #widgets .widget.widget-expiration .widget-title [class^="icon-"], body.new-design-active #widgets .widget.widget-expiration .widget-title [class^="icon-"]:before, body.new-design-active #widgets .widget.widget-expiration .widget-title [class*=" icon-"], body.new-design-active #widgets .widget.widget-expiration .widget-title [class*=" icon-"]:before { color: #fff !important; } /* ========================================================= NAVITRAX - FORCE PRIMARY COLOR ON WIDGET HEADER ICONS ========================================================= */ body.new-design-active #widgets .widget .widget-heading .widget-title i, body.new-design-active #widgets .widget .widget-heading .widget-title span, body.new-design-active #widgets .widget .widget-heading .widget-title [class*="icon"], body.new-design-active #widgets .widget .widget-heading .widget-title [class*="gps"] { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } /* pseudo-elements */ body.new-design-active #widgets .widget .widget-heading .widget-title i:before, body.new-design-active #widgets .widget .widget-heading .widget-title span:before, body.new-design-active #widgets .widget .widget-heading .widget-title [class*="icon"]:before, body.new-design-active #widgets .widget .widget-heading .widget-title [class*="gps"]:before { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; } /* excepción widget vencimiento */ body.new-design-active #widgets .widget.widget-expiration .widget-title, body.new-design-active #widgets .widget.widget-expiration .widget-title *, body.new-design-active #widgets .widget.widget-expiration .widget-title *:before { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ========================================================= NAVITRAX WIDGET HEADER ICON PRIMARY COLOR FIX ========================================================= */ .widget .widget-heading .widget-title, .widget .widget-heading .widget-title * { display: flex; align-items: center; gap: 7px; } .widget .widget-heading .widget-title { font-weight: 700 !important; } /* FONT AWESOME */ .widget .widget-heading .widget-title .fa, .widget .widget-heading .widget-title [class^="fa-"], .widget .widget-heading .widget-title [class*=" fa-"] { color: var(--primary-color) !important; } /* ICON */ .widget .widget-heading .widget-title .icon, .widget .widget-heading .widget-title [class^="icon-"], .widget .widget-heading .widget-title [class*=" icon-"] { color: var(--primary-color) !important; } /* GPS ICONS */ .widget .widget-heading .widget-title .icon-gps, .widget .widget-heading .widget-title [class^="icon-gps-"], .widget .widget-heading .widget-title [class*=" icon-gps-"] { color: var(--primary-color) !important; } /* PSEUDO ELEMENTS */ .widget .widget-heading .widget-title .icon:before, .widget .widget-heading .widget-title [class^="icon-"]:before, .widget .widget-heading .widget-title [class*=" icon-"]:before, .widget .widget-heading .widget-title .icon-gps:before, .widget .widget-heading .widget-title [class^="icon-gps-"]:before, .widget .widget-heading .widget-title [class*=" icon-gps-"]:before, .widget .widget-heading .widget-title .fa:before, .widget .widget-heading .widget-title [class^="fa-"]:before, .widget .widget-heading .widget-title [class*=" fa-"]:before { color: var(--primary-color) !important; } /* WIDGET VENCIMIENTO */ .widget-expiration .widget-heading .widget-title, .widget-expiration .widget-heading .widget-title * { color: #ffffff !important; } /* NAVITRAX - REAL DYNAMIC PRIMARY COLOR FOR WIDGET HEADER ICONS */ body.new-design-active #widgets .widget .widget-heading .widget-title > i, body.new-design-active #widgets .widget .widget-heading .widget-title > i:before, body.new-design-active #widgets .widget .widget-heading .widget-title > .icon, body.new-design-active #widgets .widget .widget-heading .widget-title > .icon:before, body.new-design-active #widgets .widget .widget-heading .widget-title > [class^="icon-"], body.new-design-active #widgets .widget .widget-heading .widget-title > [class^="icon-"]:before, body.new-design-active #widgets .widget .widget-heading .widget-title > [class*=" icon-"], body.new-design-active #widgets .widget .widget-heading .widget-title > [class*=" icon-"]:before, body.new-design-active #widgets .widget .widget-heading .widget-title > [class^="icon-gps-"], body.new-design-active #widgets .widget .widget-heading .widget-title > [class^="icon-gps-"]:before, body.new-design-active #widgets .widget .widget-heading .widget-title > [class*=" icon-gps-"], body.new-design-active #widgets .widget .widget-heading .widget-title > [class*=" icon-gps-"]:before { color: var(--navitrax-widget-primary, #6e42ff) !important; -webkit-text-fill-color: var(--navitrax-widget-primary, #6e42ff) !important; } /* Mantener vencimiento en blanco */ body.new-design-active #widgets .widget.widget-expiration .widget-heading .widget-title, body.new-design-active #widgets .widget.widget-expiration .widget-heading .widget-title *, body.new-design-active #widgets .widget.widget-expiration .widget-heading .widget-title *:before { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* NAVITRAX - WIDGET HEADER ICONS USING REAL THEME PRIMARY */ body.new-design-active #widgets .widget .widget-heading .widget-title > i, body.new-design-active #widgets .widget .widget-heading .widget-title > i:before, body.new-design-active #widgets .widget .widget-heading .widget-title > .icon, body.new-design-active #widgets .widget .widget-heading .widget-title > .icon:before, body.new-design-active #widgets .widget .widget-heading .widget-title > [class^="icon-"], body.new-design-active #widgets .widget .widget-heading .widget-title > [class^="icon-"]:before, body.new-design-active #widgets .widget .widget-heading .widget-title > [class*=" icon-"], body.new-design-active #widgets .widget .widget-heading .widget-title > [class*=" icon-"]:before { color: var(--navitrax-primary-runtime) !important; -webkit-text-fill-color: var(--navitrax-primary-runtime) !important; } /* Vencimiento queda blanco por fondo rojo */ body.new-design-active #widgets .widget.widget-expiration .widget-heading .widget-title, body.new-design-active #widgets .widget.widget-expiration .widget-heading .widget-title *, body.new-design-active #widgets .widget.widget-expiration .widget-heading .widget-title *:before { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ========================================================= NAVITRAX - Theme Pro widgets header height normalization Corrige widgets Servicios y Foto más altos que los demás ========================================================= */ body.theme-pro .widgets-container .widget .widget-heading, body.theme-pro .widgets-container .widget .widget-header, body.theme-pro .widgets-container .widget .panel-heading { min-height: 38px !important; height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; } /* Normalizar título e iconos dentro del header */ body.theme-pro .widgets-container .widget .widget-heading *, body.theme-pro .widgets-container .widget .widget-header *, body.theme-pro .widgets-container .widget .panel-heading * { line-height: 1.2 !important; } /* Evitar que botones, imágenes o iconos agranden Servicios / Foto */ body.theme-pro .widgets-container .widget .widget-heading img, body.theme-pro .widgets-container .widget .widget-header img, body.theme-pro .widgets-container .widget .panel-heading img, body.theme-pro .widgets-container .widget .widget-heading i, body.theme-pro .widgets-container .widget .widget-header i, body.theme-pro .widgets-container .widget .panel-heading i { max-height: 18px !important; line-height: 18px !important; } /* ========================================================= NAVITRAX - THEME PRO Normalizar altura headers widgets Servicios / Foto ========================================================= */ body.basic_theme_pro #widgets .widget .widget-heading { min-height: 38px !important; height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; } /* Centrado vertical real del contenido */ body.basic_theme_pro #widgets .widget .widget-heading .widget-title { min-height: 38px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } /* Evitar que iconos o imágenes agranden algunos widgets */ body.basic_theme_pro #widgets .widget .widget-heading img, body.basic_theme_pro #widgets .widget .widget-heading i { max-height: 18px !important; line-height: 18px !important; } /* ========================================================= NAVITRAX - Disable widgets overlay loader/fade Solo panel widgets (Theme Pro + New Design) ========================================================= */ /* Evitar atenuación del panel widgets */ #widgets, #widgets.loading, #widgets.load, #widgets.refreshing, #widgets.updating { opacity: 1 !important; filter: none !important; } /* Ocultar overlays/spinners SOLO dentro widgets */ #widgets .loader, #widgets .ajax-loader, #widgets .loading, #widgets .loading-overlay, #widgets .widget-loader, #widgets .spinner, #widgets .fa-spinner, #widgets .glyphicon-refresh, #widgets .sk-circle, #widgets .preloader { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Evitar pseudo-elementos oscuros */ #widgets:before, #widgets:after, #widgets .widget:before, #widgets .widget:after { animation: none !important; } /* Mantener interacción activa */ #widgets, #widgets * { pointer-events: auto !important; } /* ========================================================= NAVITRAX - Widget header proper alignment Titulo/icono izquierda - acciones extras derecha ========================================================= */ /* Layout principal */ #widgets .widget .widget-heading .widget-title { display: flex !important; align-items: center !important; gap: 8px !important; } /* Acciones extras SIEMPRE a la derecha */ #widgets .widget .widget-heading .widget-title .widget-actions { order: 99 !important; margin-left: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; } /* Icono principal del widget */ #widgets .widget .widget-heading .widget-title > i, #widgets .widget .widget-heading .widget-title > .icon, #widgets .widget .widget-heading .widget-title > [class^="icon-"], #widgets .widget .widget-heading .widget-title > [class*=" icon-"] { order: 1 !important; flex-shrink: 0 !important; } /* Texto título */ #widgets .widget .widget-heading .widget-title > span:not(.widget-actions span) { order: 2 !important; } /* Evitar que acciones rompan layout */ #widgets .widget .widget-heading .widget-title .widget-actions * { white-space: nowrap !important; } /* ========================================================= NAVITRAX - TRUE RIGHT ALIGN widget actions ========================================================= */ /* Header completo */ #widgets .widget .widget-heading { display: flex !important; align-items: center !important; } /* El title ocupa todo el ancho */ #widgets .widget .widget-heading .widget-title { width: 100% !important; display: flex !important; align-items: center !important; } /* Acciones completamente al extremo derecho */ #widgets .widget .widget-heading .widget-title .widget-actions { margin-left: auto !important; display: flex !important; align-items: center !important; text-align: right !important; justify-content: flex-end !important; white-space: nowrap !important; } /* Icono principal */ #widgets .widget .widget-heading .widget-title > i, #widgets .widget .widget-heading .widget-title > .icon, #widgets .widget .widget-heading .widget-title > [class^="icon-"], #widgets .widget .widget-heading .widget-title > [class*=" icon-"] { flex-shrink: 0 !important; } /* Texto principal */ #widgets .widget .widget-heading .widget-title > span:not(.widget-actions span) { overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================================= NAVITRAX - Widget header final order fix Icono + titulo izquierda / extras extremo derecho ========================================================= */ #widgets .widget .widget-heading, #widgets .widget .widget-heading .widget-title { display: flex !important; align-items: center !important; } #widgets .widget .widget-heading .widget-title { width: 100% !important; gap: 8px !important; } /* Extras al extremo derecho */ #widgets .widget .widget-heading .widget-title .widget-actions { order: 50 !important; margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; white-space: nowrap !important; } /* Icono del título SIEMPRE primero */ #widgets .widget .widget-heading .widget-title > i, #widgets .widget .widget-heading .widget-title > .icon, #widgets .widget .widget-heading .widget-title > [class^="icon-"], #widgets .widget .widget-heading .widget-title > [class*=" icon-"] { order: 1 !important; flex-shrink: 0 !important; } /* Texto del título SIEMPRE después del icono */ #widgets .widget .widget-heading .widget-title > span { order: 2 !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Pero los spans dentro de acciones NO deben comportarse como título */ #widgets .widget .widget-heading .widget-title .widget-actions span { order: initial !important; overflow: visible !important; text-overflow: clip !important; } /* ========================================================= } /* Icono principal SIEMPRE columna izquierda */ #widgets .widget .widget-heading .widget-title > i, #widgets .widget .widget-heading .widget-title > .icon { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; margin: 0 !important; } /* Texto principal SIEMPRE después del icono */ #widgets .widget .widget-heading .widget-title > span { grid-column: 2 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Spans internos de extras no deben comportarse como título */ #widgets .widget .widget-heading .widget-title > .widget-actions span { grid-column: auto !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }