/* ============================================================
   OMTRACKING - THEME BASE
   Base visual común para Bootstrap 5.3.
   Inspiración: interfaz empresarial clásica tipo Lawson,
   con relieve/bisel sutil, bordes rectos y alto contraste.

   Orden de carga:
   1) Bootstrap / DataTables / site.css
   2) omt-theme-base.css
   3) SOLO UNO:
      omt-gmas.css / omt-cab.css / omt-lawson.css
   ============================================================ */

:root {
    /* --------------------------------------------------------
       Paleta neutral / fallback
       -------------------------------------------------------- */
    --omt-primary: #2f6f9f;
    --omt-primary-rgb: 47, 111, 159;
    --omt-primary-dark: #24577d;
    --omt-primary-soft: #eaf2f7;
    --omt-accent: #6f8799;

    --omt-body-bg: #eef3f6;
    --omt-surface: #ffffff;
    --omt-surface-alt: #f7f9fb;
    --omt-surface-hover: #edf3f7;

    --omt-border: #c6d3dd;
    --omt-border-strong: #aebfcb;

    --omt-text: #22313f;
    --omt-text-muted: #687987;

    /* --------------------------------------------------------
       Barra superior / navegación
       -------------------------------------------------------- */
    --omt-navbar-top: #4d88b0;
    --omt-navbar-mid: #2f6f9f;
    --omt-navbar-bottom: #24577d;
    --omt-navbar-border: #173f5d;
    --omt-navbar-text: #ffffff;

    /* --------------------------------------------------------
       Paneles
       -------------------------------------------------------- */
    --omt-panel-head-top: #f8fbfd;
    --omt-panel-head-bg: #e3edf4;
    --omt-panel-head-bottom: #d5e2eb;
    --omt-panel-head-border: #b8cad7;
    --omt-panel-head-text: #24435b;

    /* --------------------------------------------------------
       Tablas
       -------------------------------------------------------- */
    --omt-table-head-top: #edf3f7;
    --omt-table-head-bg: #dbe6ed;
    --omt-table-head-bg-2: #cedce6;
    --omt-table-head-border: #b4c7d4;
    --omt-table-head-text: #244052;

    --omt-focus: rgba(var(--omt-primary-rgb), .18);

    /* Borde corto y más clásico: menos redondeo */
    --omt-radius: 3px;
    --omt-radius-sm: 2px;

    /* --------------------------------------------------------
       Integración con Bootstrap
       -------------------------------------------------------- */
    --bs-primary: var(--omt-primary);
    --bs-primary-rgb: var(--omt-primary-rgb);

    --bs-primary-bg-subtle: var(--omt-primary-soft);
    --bs-primary-border-subtle: var(--omt-panel-head-border);
    --bs-primary-text-emphasis: var(--omt-primary-dark);

    --bs-link-color: var(--omt-primary);
    --bs-link-hover-color: var(--omt-primary-dark);

    --bs-body-color: var(--omt-text);
    --bs-border-color: var(--omt-border);
}

/* ============================================================
   BASE
   ============================================================ */

body {
    color: var(--omt-text);
    background-color: var(--omt-body-bg);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

body.bg-white {
    background-color: var(--omt-body-bg) !important;
}

/* ============================================================
   UTILIDADES BOOTSTRAP ADAPTADAS AL TEMA
   ============================================================ */

.bg-primary {
    background-color: var(--omt-primary) !important;
}

.bg-primary-subtle {
    background-color: var(--omt-primary-soft) !important;
}

.text-primary {
    color: var(--omt-primary) !important;
}

.text-primary-emphasis {
    color: var(--omt-primary-dark) !important;
}

.border-primary {
    border-color: var(--omt-primary) !important;
}

/* ============================================================
   NAVEGACIÓN PRINCIPAL
   Estilo empresarial biselado / Lawson-like
   ============================================================ */

#sidebar-menu.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background:
        linear-gradient(
            180deg,
            var(--omt-navbar-top) 0%,
            var(--omt-navbar-mid) 48%,
            var(--omt-navbar-bottom) 100%
        ) !important;

    border: 1px solid var(--omt-navbar-border) !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.46),
        inset 0 -1px 0 rgba(0,0,0,.28),
        0 2px 5px rgba(20,38,52,.18) !important;
}

#sidebar-menu .navbar-collapse {
    background: transparent !important;
    border-radius: 0 !important;
}

/* ============================================================
   LOGO / MARCA
   Placa clara biselada para mantener contraste en todos los temas
   ============================================================ */

#sidebar-menu .navbar-brand {
    color: #173a57 !important;

    margin-top: 0;
    margin-bottom: 0;

    padding-top: .28rem;
    padding-bottom: .28rem;
    padding-left: .55rem;
    padding-right: .85rem;

    border: 0;
    border-right: 1px solid rgba(0, 0, 0, .30);
    border-radius: 0 !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f3f7f9 35%,
            #dbe5eb 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(69,94,111,.28),
        inset -1px 0 0 rgba(255,255,255,.50),
        1px 0 2px rgba(0,0,0,.12) !important;

    text-shadow: none !important;
}


/* Logo gráfico */
#sidebar-menu .navbar-brand #navbarLogo {
    max-height: 28px !important;
    width: auto !important;

    filter:
        drop-shadow(0 1px 0 rgba(255,255,255,.60));

    opacity: 1;
}


/* Nombre de respaldo si no carga la imagen */
#sidebar-menu .navbar-brand #navbarTitle {
    color: #173a57 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.80);
}


/* Hover de la marca: muy discreto */
#sidebar-menu .navbar-brand:hover,
#sidebar-menu .navbar-brand:focus {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #edf4f7 35%,
            #cfdee6 100%
        ) !important;

    color: #102f49 !important;
}

#sidebar-menu .navbar-nav {
    align-items: stretch;
}

#sidebar-menu .navbar-nav .nav-item {
    display: flex;
    align-items: stretch;
}

#sidebar-menu .navbar-nav .nav-link {
    display: flex;
    align-items: center;

    color: var(--omt-navbar-text) !important;

    padding: .48rem .68rem;
    margin: 0;

    border: 1px solid transparent;
    border-top: 0;
    border-bottom: 0;
    border-radius: 0 !important;

    background: transparent !important;

    font-weight: 500;
    text-shadow: 0 1px 0 rgba(0,0,0,.24);

    box-shadow: none !important;

    transition:
        background-color .12s ease,
        color .12s ease,
        border-color .12s ease,
        box-shadow .12s ease;
}

#sidebar-menu .navbar-nav .nav-link i {
    color: inherit !important;
}

/* Hover con relieve, sin caja blanca ni esquinas redondeadas */
#sidebar-menu .navbar-nav .nav-link:hover,
#sidebar-menu .navbar-nav .nav-link:focus,
#sidebar-menu .navbar-nav .nav-link.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.24) 0%,
            rgba(255,255,255,.10) 42%,
            rgba(0,0,0,.08) 100%
        ) !important;

    border-left-color: rgba(255,255,255,.18);
    border-right-color: rgba(0,0,0,.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.40),
        inset 0 -1px 0 rgba(0,0,0,.25) !important;

    text-decoration: none;
    outline: none;
}

/* Cerrar sesión */
#sidebar-menu .navbar-nav .nav-link.text-danger,
#sidebar-menu .navbar-nav .nav-link.text-danger i {
    color: #ffffff !important;
}

#sidebar-menu .navbar-nav .nav-link.text-danger {
    font-weight: 600;

    text-shadow:
        0 1px 0 rgba(0, 0, 0, .42);
}

#sidebar-menu .navbar-nav .nav-link.text-danger:hover,
#sidebar-menu .navbar-nav .nav-link.text-danger:focus {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.16) 0%,
            rgba(166,38,38,.34) 48%,
            rgba(91,18,18,.42) 100%
        ) !important;

    border-left-color: rgba(255,255,255,.14);
    border-right-color: rgba(72,0,0,.30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -2px 0 rgba(178,48,48,.72) !important;
}

#sidebar-menu .navbar-toggler {
    border-radius: 0 !important;
    border-color: rgba(255,255,255,.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -1px 0 rgba(0,0,0,.22) !important;
}

#sidebar-menu .navbar-toggler:focus {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -1px 0 rgba(0,0,0,.22),
        0 0 0 .14rem rgba(var(--omt-primary-rgb), .22) !important;
}

/* ============================================================
   PANEL
   ============================================================ */

#PanelContent {
    color: var(--omt-text);
    background-color: var(--omt-body-bg);
}

#PanelContent > .p-4 {
    background-color: transparent;
}

/* ============================================================
   CARDS / PANELES
   ============================================================ */

#PanelContent .card {
    background-color: var(--omt-surface);
    border: 1px solid var(--omt-border-strong) !important;
    border-radius: var(--omt-radius) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 2px 6px rgba(28,52,69,.08);
}

#PanelContent .card-header {
    color: var(--omt-panel-head-text) !important;

    background:
        linear-gradient(
            180deg,
            var(--omt-panel-head-top) 0%,
            var(--omt-panel-head-bg) 47%,
            var(--omt-panel-head-bottom) 100%
        ) !important;

    border-bottom: 1px solid var(--omt-panel-head-border) !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -1px 0 rgba(53,75,91,.10);
}

#PanelContent .card-body,
#PanelContent .card-footer {
    background-color: var(--omt-surface) !important;
}

#PanelContent .bg-light-subtle,
#PanelContent .bg-body-tertiary {
    background-color: var(--omt-surface-alt) !important;
}

/* ============================================================
   KPIs SUPERIORES
   ============================================================ */

#PanelContent .indicador-pipas > div,
#PanelContent .indicador-vactors > div,
#PanelContent .indicador-pozos > div,
#PanelContent .indicador-desconexion > div,
#PanelContent .indicador-bateria > div {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 55%,
            var(--omt-surface-alt) 100%
        ) !important;

    border-top: 1px solid #ffffff !important;
    border-right: 1px solid var(--omt-border) !important;
    border-bottom: 1px solid var(--omt-border-strong) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 4px 10px rgba(30,54,70,.10) !important;
}

/* ============================================================
   BOTONES
   ============================================================ */

.btn {
    border-radius: var(--omt-radius-sm) !important;
    font-weight: 500;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        inset 0 -1px 0 rgba(0,0,0,.10) !important;
}

.btn:hover,
.btn:focus {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(0,0,0,.16) !important;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--omt-primary);
    --bs-btn-border-color: var(--omt-primary-dark);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--omt-primary-dark);
    --bs-btn-hover-border-color: var(--omt-primary-dark);

    --bs-btn-focus-shadow-rgb: var(--omt-primary-rgb);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--omt-primary-dark);
    --bs-btn-active-border-color: var(--omt-primary-dark);

    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--omt-primary);
    --bs-btn-disabled-border-color: var(--omt-primary-dark);

    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.03) 48%,
            rgba(0,0,0,.10)
        );
}

.btn-outline-primary {
    --bs-btn-color: var(--omt-primary-dark);
    --bs-btn-border-color: var(--omt-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--omt-primary);
    --bs-btn-hover-border-color: var(--omt-primary-dark);

    --bs-btn-focus-shadow-rgb: var(--omt-primary-rgb);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--omt-primary-dark);
    --bs-btn-active-border-color: var(--omt-primary-dark);

    --bs-btn-disabled-color: var(--omt-primary);
    --bs-btn-disabled-border-color: var(--omt-primary);
}

.btn-outline-secondary {
    --bs-btn-color: #536a7a;
    --bs-btn-border-color: #9fb0bc;

    --bs-btn-hover-color: #304654;
    --bs-btn-hover-bg: #e5edf2;
    --bs-btn-hover-border-color: #879cab;

    --bs-btn-active-color: #304654;
    --bs-btn-active-bg: #d9e4eb;
    --bs-btn-active-border-color: #879cab;
}

/* ============================================================
   FORMULARIOS
   ============================================================ */

.form-control,
.form-select,
.input-group-text {
    border-color: var(--omt-border-strong);
    border-radius: var(--omt-radius-sm) !important;
}

.form-control,
.form-select {
    color: var(--omt-text);
    background-color: #ffffff;

    box-shadow:
        inset 0 1px 2px rgba(34,49,63,.06) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--omt-primary);
    box-shadow:
        inset 0 1px 2px rgba(34,49,63,.05),
        0 0 0 .16rem var(--omt-focus) !important;
}

.input-group-text {
    color: var(--omt-panel-head-text);
    background:
        linear-gradient(
            180deg,
            #ffffff,
            var(--omt-primary-soft)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88);
}

/* ============================================================
   DATATABLES / TABLAS
   ============================================================ */

#PanelContent .table {
    --bs-table-color: var(--omt-text);
    --bs-table-bg: #ffffff;
    --bs-table-border-color: var(--omt-border);
    --bs-table-striped-bg: var(--omt-surface-alt);
    --bs-table-hover-bg: var(--omt-surface-hover);

    margin-bottom: 0;
}

#PanelContent .table thead th,
#PanelContent table.dataTable thead th,
#PanelContent table.dataTable thead td {
    color: var(--omt-table-head-text) !important;

    background:
        linear-gradient(
            180deg,
            var(--omt-table-head-top) 0%,
            var(--omt-table-head-bg) 46%,
            var(--omt-table-head-bg-2) 100%
        ) !important;

    border-top-color: rgba(255,255,255,.85) !important;
    border-left-color: rgba(255,255,255,.45) !important;
    border-right-color: var(--omt-table-head-border) !important;
    border-bottom-color: var(--omt-table-head-border) !important;

    font-weight: 650;
    text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.76),
        inset 0 -1px 0 rgba(56,78,94,.10);
}

#PanelContent .table tbody td {
    border-color: var(--omt-border) !important;
}

#PanelContent .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--omt-surface-hover);
}

/* Filtros colocados dentro del encabezado */
#PanelContent .table thead input,
#PanelContent .table thead select,
#PanelContent table.dataTable thead input,
#PanelContent table.dataTable thead select {
    color: var(--omt-text) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--omt-border-strong) !important;
    border-radius: var(--omt-radius-sm) !important;

    box-shadow:
        inset 0 1px 2px rgba(34,49,63,.06) !important;
}

/* Controles DataTables */
#PanelContent .dt-container .dt-input,
#PanelContent .dataTables_wrapper input,
#PanelContent .dataTables_wrapper select {
    color: var(--omt-text);
    background-color: #ffffff;
    border-color: var(--omt-border-strong);
    border-radius: var(--omt-radius-sm) !important;
}

/* ============================================================
   SELECTOR DE GRUPOS
   ============================================================ */

#PanelContent .js-dashboard-group {
    font-weight: 500;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge.bg-primary {
    background-color: var(--omt-primary) !important;
}

/* ============================================================
   MODALES
   ============================================================ */

.modal-content {
    color: var(--omt-text);
    background-color: var(--omt-surface);
    border: 1px solid var(--omt-border-strong) !important;
    border-radius: var(--omt-radius) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 12px 32px rgba(21,41,55,.22);
}

.modal-header {
    color: var(--omt-panel-head-text);

    background:
        linear-gradient(
            180deg,
            var(--omt-panel-head-top),
            var(--omt-panel-head-bg) 52%,
            var(--omt-panel-head-bottom)
        ) !important;

    border-bottom-color: var(--omt-panel-head-border);
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -1px 0 rgba(49,72,89,.10);
}

.modal-header.bg-primary {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            var(--omt-navbar-top),
            var(--omt-primary) 50%,
            var(--omt-primary-dark)
        ) !important;

    text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.modal-footer {
    background:
        linear-gradient(
            180deg,
            #ffffff,
            var(--omt-surface-alt)
        ) !important;

    border-top-color: var(--omt-border);
}

/* ============================================================
   OFFCANVAS MÓVIL
   ============================================================ */

#offcanvasMenu {
    background:
        linear-gradient(
            180deg,
            var(--omt-navbar-mid),
            var(--omt-navbar-bottom)
        ) !important;
}

#offcanvasMenu .nav-link,
#offcanvasMenu .offcanvas-title {
    color: #ffffff !important;
}

/* ============================================================
   TEXTO
   ============================================================ */

#PanelContent .text-muted,
#PanelContent .form-text {
    color: var(--omt-text-muted) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #e8eef2;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            90deg,
            #bccbd4,
            #93a9b7
        );

    border: 2px solid #e8eef2;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            90deg,
            #aabcc8,
            #7e98a8
        );
}

/* ============================================================
   VISOR DE RUTAS OPERATIVAS
   ============================================================ */

#operativeRouteViewerModal .modal-content {
    overflow: hidden;
}


/* ------------------------------------------------------------
   Header compacto
   ------------------------------------------------------------ */

#operativeRouteViewerModal .route-viewer-header {
    padding: .65rem .85rem;
}

#operativeRouteViewerModal .route-viewer-header-content {
    min-width: 0;
}

#operativeRouteViewerModal .route-viewer-header-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .35rem .65rem;
}

#operativeRouteViewerModal .route-viewer-header-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .3rem 1rem;

    margin-top: .2rem;
}

#operativeRouteViewerModal .route-viewer-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .3rem;
}

#operativeRouteViewerModal .route-viewer-vehicles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .3rem;
}

#operativeRouteViewerModal .route-viewer-summary-badge,
#operativeRouteViewerModal .route-viewer-vehicle-badge {
    font-weight: 500;
}

/* ------------------------------------------------------------
   Mapa
   ------------------------------------------------------------ */

#operativeRouteViewerModal .route-viewer-map-wrap {
    position: relative;
    overflow: hidden;
}

#operativeRouteViewerModal .route-viewer-map {
    width: 100%;
    height: 64vh;
    min-height: 420px;
}


/* ------------------------------------------------------------
   Atribución Leaflet
   ------------------------------------------------------------ */

#operativeRouteViewerModal .leaflet-control-attribution {
    position: absolute !important;

    width: auto !important;
    max-width: calc(100% - 20px);

    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;

    padding: 1px 5px !important;

    font-size: 10px;
    line-height: 1.2;

    text-align: right !important;

    background:
        rgba(
            255,
            255,
            255,
            .82
        ) !important;
}

/* ------------------------------------------------------------
   Footer compacto de segmentos
   ------------------------------------------------------------ */

#operativeRouteViewerModal .route-viewer-segments-footer {
    display: block;

    padding: .45rem .75rem;

    overflow: hidden;
}

#operativeRouteViewerModal .route-viewer-segments-row {
    display: flex;
    align-items: center;

    gap: .55rem;

    width: 100%;
}

#operativeRouteViewerModal .route-viewer-segments-label {
    flex: 0 0 auto;

    font-size: .75rem;
    font-weight: 600;
}

#operativeRouteViewerModal .route-viewer-segment-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    flex: 1 1 auto;

    gap: .35rem;

    min-width: 0;

    overflow-x: hidden;
    overflow-y: auto;

    max-height: 105px;
}

#operativeRouteViewerModal .route-viewer-segment-item {
    display: inline-flex;
    align-items: center;

    gap: .4rem;

    min-width: 145px;

    padding: .25rem .45rem;

    color: var(--omt-text);

    background-color: var(--omt-surface);

    border:
        1px solid
        var(--omt-border) !important;

    transition:
        background-color .12s ease,
        border-color .12s ease;
}

#operativeRouteViewerModal .route-viewer-segment-item:hover,
#operativeRouteViewerModal .route-viewer-segment-item.is-active {
    color: var(--omt-primary-dark);

    background-color: var(--omt-primary-soft);

    border-color:
        var(--omt-primary) !important;
}

#operativeRouteViewerModal .route-viewer-segment-swatch {
    flex: 0 0 auto;

    width: 12px;
    height: 12px;

    border:
        1px solid
        rgba(0, 0, 0, .18);

    border-radius: 2px;
}

#operativeRouteViewerModal .route-viewer-segment-copy {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

#operativeRouteViewerModal .route-viewer-segment-copy small {
    margin-top: 1px;

    font-size: .68rem;
}

#operativeRouteViewerModal .route-viewer-segment-tooltip {
    font-size: 12px;
}

@media (max-width: 768px) {

    #operativeRouteViewerModal .route-viewer-map {
        height: 55vh;
        min-height: 340px;
    }

    #operativeRouteViewerModal .route-viewer-segments-footer {
        max-height: 190px;
    }
}