/* Asegura que el mapa ocupe toda la pantalla */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        html, body {
        overscroll-behavior-y: contain;
        touch-action: pan-x pan-y;
        }

        #map {
            height: calc(100% - 56px);
            /* Ajusta el mapa para no ocupar el espacio del menú superior */
            width: calc(100% - 400px);
            /* Deja espacio para la tabla en el lado izquierdo */
            margin-left: 400px;
            /* Empuja el mapa para dejar espacio para la tabla */
            transition: margin-left 0.3s, width 0.3s;
            position: relative;
        }

        /* Menú superior */
        #top-menu {
            height: 56px;
            background-color: #343a40;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
        }

        /* Estilo para la tabla flotante */
        #floating-table {
            position: fixed;
            top: 56px;
            left: 0;
            width: 400px;
            height: calc(100% - 56px);
            background-color: #f8f9fa;
            /* overflow-y: auto; */
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            z-index: 1001;
        }

        /* Estilo de la tabla */
        .table {
            width: 100%;
            margin-bottom: 0;
        }

        .table th,
        .table td {
            white-space: nowrap;
        }

        /* Oculta la barra lateral (cuando se colapsa) */
        .collapsed {
            /* transform: translateX(-100%); */
              transform: translateX(calc(-100% - 60px)); /* se va completamente fuera */

        }

        /* Modo colapsado para el mapa (ocupa toda la pantalla) */
        .map-expanded {
            margin-left: 1px;
            width: calc(100% - 0px);
        }


        /***************************************************/



        /* En pantallas pequeñas, la tabla está visible por defecto */
        @media (max-width: 770px) {
            #floating-table {
                width: 100%;
                top: 56px;
                left: 0;
                height: calc(100% - 56px);
            }

            .map-expanded {
                display: block;
                /* Mostrar el mapa al colapsar la tabla */
                width: 100%;
                margin-left: 0;
            }
        }

        /* Centrado del modal en dispositivos grandes */
        .modal-lg-custom {
            max-width: 600px;
            /* Ancho máximo */
            margin: auto;
            /* Centrado horizontal */
        }

        .modal-content {
            max-height: 600px;
            /* Altura máxima */
            margin: auto;
            /* Centrado vertical */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Panel que aparecerá desde abajo */
        /* Base: oculto a la derecha */
        .sliding-panel {
            position: absolute;
            top: 56px;
            /* Ajusta si tienes navbar */
            bottom: 0;
            right: 0;
            width: 350px;
            /* background-color: #f8f9fa; */
            background-color: transparent;
            backdrop-filter: none;
            /* box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2); */
            overflow-y: auto;
            z-index: 999;
            transition: transform 0.3s ease;
            /*transform: translateX(100%);*/
            /* Inicialmente fuera de la pantalla */
            /* height: 100%; */
            max-height: calc(100vh - 56px);
            /* Ajustado a tu top de 56px */
            overscroll-behavior: contain;
            /* Previene scroll de fondo */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; /* hace que iOS lo permita */
            padding: 16px;
            display: block;
        }

        .sliding-panel {
            pointer-events: none;
            /* No recibe eventos */
        }

        .sliding-panel .accordion,
        .sliding-panel .accordion * {
            pointer-events: auto;
            /* Sí recibe eventos */
        }

        #slidingPanel {
            top: 0px;
        }

        /* Cuando se muestra */
        .sliding-panel.show {
            transform: translateX(0);
        }

        /* Oculto (por defecto) */
        .sliding-panel.hidden {
            display: none;
        }

        .sliding-panel * {
            box-sizing: border-box;
        }

        .sliding-panel {
            text-align: left;
            padding: 16px;
        }

        .sliding-panel>div,
        .sliding-panel>section,
        .sliding-panel>article {
            width: 100%;
        }

        .sliding-panel-body,
        .sensor-info,
        .historico-info {
            padding: 16px;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
        }



        /* Solo para pantallas grandes */
        @media (max-width: 770px) {
            .sliding-panel {
                position: fixed;
                width: 100%;
                height: 50vh;
                top: auto;
                bottom: 0;
                right: 0;
                /*transform: translateY(100%);*/
                transition: transform 0.3s ease;
            }

            .sliding-panel.show {
                transform: translateY(0);
            }



        }


        /* Pantallas pequeñas: panel inferior */
        @media (max-width: 770px) {
            .sliding-panel {
                left: 0;
                bottom: -100%;
                width: 100%;
                height: 45vh;
                /* 50% de la altura de la pantalla */
                /* border-top: 2px solid #ddd; */
            }

            .sliding-panel.show {
                bottom: 0;
            }

            .sliding-panel.hidden {
                bottom: -100%;
            }
        }


        .sliding-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
        }

        .sliding-panel-body {
            padding: 15px;
        }

        .sliding-panel-header .btn-close {
            position: relative;
            top: 0;
            right: 0;
        }

        /* Estilo para el botón en la parte inferior */
        .slide-toggle-btn {
            position: fixed;
            bottom: 10px;
            right: 10px;
            z-index: 1051;
        }

        .toolbar {
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: white;
        }

        /* Estilo para el contenido de las tablas que permite el scroll */
        .tab-content {
            height: calc(100% - 40px);
            /* Ajusta para que no ocupe el espacio del tabbar */
            overflow-x: hidden;
            overflow-y: auto;
            min-height: 400px;
        }

        .tab-contentpdi {
            /* height: calc(100% - 40px); */
            overflow-x: hidden;
            overflow-y: hidden;
        }

        /* Estilos para mejorar el ajuste y hacer la fuente más pequeña */
        .unit-info {
            font-size: 14px;
            /* Fuente más pequeña */
            line-height: 1.2;
            /* Menos espacio entre líneas */
        }

        .unit-info td {
            vertical-align: top;
        }

        .unit-info img {
            margin-right: 8px;
        }

        .unit-info .details {
            display: inline-block;
            vertical-align: top;
        }

        .unit-info .additional-info {
            margin-top: 0px;
            /* Espacio entre el ícono y la información adicional */
            margin-left: 10px;
            /* Asegura que el contenido extra esté alineado bajo el ícono */
        }

        /* Evita el desbordamiento horizontal */
        .table {
            table-layout: fixed;
            width: 100%;
        }

        .table td {
            white-space: normal;
            /* Asegura que el texto se ajuste */
        }

        .unit-label {
            position: relative;
            top: 26px;
            /* Mueve el texto 16 píxeles hacia abajo */
            background-color: rgb(238, 228, 228);
            /* Fondo blanco */
            padding: 2px 6px;
            /* Añade espacio interno alrededor del texto */
            border-radius: 8px;
            /* Bordes redondeados */
            border: 1px solid rgba(0, 0, 0, 0.2);
            /* Un borde suave alrededor */
            font-size: 12px;
            /* Tamaño del texto */
            font-weight: bold;
            /* Texto en negrita */
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
            /* Sombra ligera para dar un efecto flotante */
            white-space: nowrap;
            /* Evita que el texto se rompa en varias líneas */
        }

        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            /* Fondo blanco semitransparente */
            z-index: 9999;
            /* Asegura que esté encima de todo */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Cambiar el color del spinner a naranja */
        .spinner-border.custom-spinner {
            width: 5rem;
            /* Aumenta el tamaño */
            height: 5rem;
            /* Aumenta el tamaño */
            border-width: 0.4rem;
            /* Aumenta el grosor del borde */
            color: orange;
            /* Cambia el color a naranja */
        }

        /* Ajustar el texto y centrado del contenido */
        .spinner-content {
            text-align: center;
        }

        .hidden {
            display: none;
        }

        .modal-fullscreen .modal-body {
            overflow-y: hidden;
        }


        .result-label {
            margin: 0;
            padding: 0;
            font-size: 14px;
            /* Puedes ajustar el tamaño si lo prefieres más pequeño */
            line-height: 1;
            /* Ajustar el espaciado vertical */
        }

        .result-value {
            margin: 0;
            padding: 0;
            font-size: 16px;
            /* Ajusta según lo que prefieras */
            font-weight: bold;
            line-height: 1.2;
            /* Asegura un espaciado reducido entre las líneas */
        }

        .gray-toast {
            background-color: #333;
            /* Fondo gris oscuro */
            color: white;
            /* Texto en blanco */
            border-radius: 5px;
            /* Bordes redondeados */
            padding: 10px;
            /* Padding interno */
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            /* Sombra para darle profundidad */
            max-width: 90%;
            /* El ancho máximo será el 90% del viewport */
            width: auto;
            /* El ancho se ajustará automáticamente */
            text-align: center;
            /* Centrar el contenido */
        }

        @media (min-width: 768px) {
            .gray-toast {
                max-width: 300px;
                /* En pantallas grandes, el ancho máximo será de 300px */
            }
        }


        .pac-container {
            z-index: 9991 !important;
            /* Asegura que las sugerencias se muestren por encima del modal */
        }

        .filterable-select-wrapper {
            position: relative;
            width: 100%;
            /* Ajusta según tus necesidades */
        }

        .scrollable-dropmenu {
            overflow-y: auto;
            max-height: 6rem;
        }

        .filterable-select-input {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        .filterable-select-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ccc;
            background: #fff;
            margin: 0;
            padding: 0;
            list-style: none;
            z-index: 1000;
        }

        .filterable-select-item {
            padding: 5px 10px;
            cursor: pointer;
        }

        .filterable-select-item:hover {
            background: #f0f0f0;
        }

        .header-title {
            background-color: var(--bs-gray-900);
            color: white;
            font-weight: bolder;
        }


        .dropdown-menu {
            z-index: 9999;
        }


        /* DASHBOARD Estilos para pantallas grandes */
        /* Para pantallas grandes: centrado y con tamaño limitado */
        @media (min-width: 576px) {
            .custom-dashboard-modal {
                max-width: 80vw;
                max-height: 80vh;
            }

            .custom-dashboard-modal .modal-content {
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .custom-dashboard-modal .modal-body {
                flex: 1 1 auto;
                overflow-y: auto;
            }
        }

        /* Pantallas pequeñas ya cubiertas por modal-fullscreen-sm-down */





        .badge-label {
            display: inline-block;
            background-color: #807c7c;
            color: #fff;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            line-height: 1;
            font-weight: 500;
            white-space: nowrap;
        }

        .blinking-red {
            color: red !important;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .accordion-wrapper {
            width: 100%;
            /* Usa todo el espacio disponible dentro del panel */
            max-width: 100%;
            /* Evita que se expanda fuera del panel */
            padding: 0 8px;
            /* Espaciado interno opcional */
            box-sizing: border-box;
        }


        .accordion-button.collapsed {
            transform: none !important;
        }

        .sliding-header {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #fff;
            padding: 12px 16px;
            border-bottom: 1px solid #ddd;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }


        /* Fondo general del acordeón */
        .accordion {
            background-color: #f8f9fa;
        }

        /* Fondo del item (individual) */
        .accordion-item {
            background-color: #f8f9fa;
            font-size: 14px;
        }

        /* Botón colapsado (cerrado) */
        .accordion-button {
            font-size: 14px;
            padding-top: 6px;
            padding-bottom: 6px;
            background-color: #f8f9fa;
            color: #212529;
        }

        /* Botón expandido (abierto) */
        .accordion-button:not(.collapsed) {
            background-color: #ebeced !important;
            color: #212529 !important;
            box-shadow: none;
            /* opcional: quitar sombreado interno */
            padding-top: 6px;
            padding-bottom: 6px;
        }

        /* Elimina sombra de enfoque (opcional si quieres más limpio) */
        .accordion-button:focus {
            box-shadow: none;
        }

        .accordion {
            background-color: #f8f9fa;
            border-radius: 6px;
            /* Opcional: esquinas redondeadas */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            border: 1px solid #dee2e6;

        }

        #historicoResumenDetalle {
            max-height: 300px;
            /* o el valor que mejor se adapte a tu diseño */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* ✅ hace scroll fluido en iOS */
        }

        .sliding-panel .accordion {
            max-height: calc(100vh - 80px);
            /* ajusta según tu diseño */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            cursor:pointer;
        }



        .custom-modal-size {
            max-width: 90vw;
            max-height: 90vh;
            width: 100%;
            margin: auto;
        }

        .custom-modal-size .modal-content {
            height: 100%;
        }

        #notification-list {
            font-size: 14px;
            line-height: 1.4;
        }

        .modal-body {
            overflow-y: auto;
            padding: 1rem;
        }


        #slidingPanel3 {
            display: none;
            /* oculto por defecto */
        }


        .custom-panel {
            position: fixed;
            bottom: 0;
            /* background-color: white; */
            /* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); */
            height: 25%;
            /* O lo que desees */
            overflow-y: hidden;
            overflow-x: hidden;
            z-index: 999;
            transition: transform 0.3s ease-in-out;
        }


        .tabulator-row.selected-row {
            background-color: #dceeff !important;
            /* azul suave o el que tú prefieras */
        }



        .accordion-button.not-expandable::after {
            background-color: #f8f9fa;
            /* opcional: ajusta el color */
            display: none;
            /* Oculta la flecha */
        }

        .accordion-button.not-expandable {
            cursor: default;
        }

        .accordion-button.not-expandable:not(.collapsed) {
            cursor: pointer;
            background-color: #f8f9fa !important;
        }

        #countdown {
            font-size: 1rem;
            font-weight: bold;
            min-width: 40px;
            text-align: center;
        }

        #video-container {
            min-height: 300px;
        }

        #video-controls {
            white-space: nowrap;
            overflow-x: auto;
            flex-wrap: nowrap !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            /* Firefox */
        }

        #video-controls::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        /* .splash-screen {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: #f0f0f0;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .splash-logo {
            max-width: 200px;
        } */


.custom-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #343a40;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.custom-toast.show {
  opacity: 1;
}

    .gm-style-iw-chr {
height: 10px;
  }


  @media (max-width: 768px) {
  #fullscreenModalDialog {
    max-width: 100%;
    margin: 0;
    height: 100vh;
  }

  #fullscreenModalDialog .modal-content {
    height: 100vh;
    border-radius: 0;
  }
}

@media (min-width: 769px) {
  #fullscreenModalDialog {
    max-width: 80vw;
    height: 80vh;
  }

  #fullscreenModalDialog .modal-content {
    height: 100%;
  }
}


#fullscreenModal .modal-dialog,
#fullscreenModal .modal-content,
#fullscreenModal .modal-body {
  overflow: hidden;
}



  /* #modalModuloDialog {
    max-width: 95vw;
    width: 100%;
  }

  @media (min-width: 768px) {
    #modalModuloDialog {
      max-width: 850px;
    }
  } */



  @media (max-width: 768px) {
  #modalModuloDialog {
    max-width: 100%;
    margin: 0;
    height: 100vh;
  }

  #modalModuloDialog .modal-content {
    height: 100vh;
    border-radius: 0;
  }

  #modalContenido {
    height: calc(100vh - 56px - 56px); /* altura menos header y margen */
    overflow-y: auto;
      min-height: 400px;

  }
}

@media (min-width: 769px) {
  #modalModuloDialog {
    max-width: 800px; /* o usa modal-lg */
    height: auto;
  }

  #modalModuloDialog .modal-content {
    max-height: 80vh;
  }

  #modalContenido {
    max-height: calc(80vh - 56px - 56px); /* altura menos header y footer */
    overflow-y: auto;
  }
}



/* Reducir el tamaño de la fuente del título */
.modal-header .modal-title {
    font-size: 1.2rem;  /* Ajusta el tamaño de la fuente */
}

/* Reducir el padding en la cabecera */
.modal-header {
    padding: 0.5rem 1rem;  /* Ajusta el espacio interno del modal-header */
}

/* Hacer que los botones sean más pequeños */
.modal-header .btn {
    font-size: 0.8rem;  /* Reducir tamaño del texto de los botones */
    padding: 0.2rem 0.5rem;  /* Ajustar el tamaño de los botones */
}

/* Opcional: reducir el tamaño del icono en el botón de exportar */
.modal-header .btn i {
    font-size: 1.2rem;  /* Ajusta el tamaño del icono dentro del botón */
}

/* Alinear el header del modal usando Flexbox */
.modal-header {
    display: flex;
    justify-content: space-between; /* Alinear el contenido de izquierda a derecha */
    align-items: center; /* Centrar verticalmente los elementos */
    padding: 0.5rem 1rem; /* Ajustar el padding del header */
}

/* Mantener el título alineado a la izquierda */
.modal-header .modal-title {
    flex: 1; /* Esto hará que el título ocupe todo el espacio disponible a la izquierda */
}

/* Alinear los botones a la derecha */
.modal-header .btn-group {
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
    align-items: center;
}

/* Estilo para los botones */
.modal-header .btn {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
}

/* Estilo para los iconos dentro de los botones */
.modal-header .btn i {
    font-size: 1.2rem; /* Ajusta el tamaño del icono */
}

/* Separación entre los botones */
.modal-header .btn-close {
    margin-left: 10px; /* Ajusta la separación entre el botón de exportar y el de cerrar */
}


/*Tabla de unidades*/
#unitTableModal .modal-dialog {
    max-width: 90vw;
    width: 90vw;
}


#unitTableModal .modal-content {
    height: 80vh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* Estilo general para la tabla */
#unitDataTable, #pdiDataTable {
    font-size: 12px; /* Reducir el tamaño de la fuente */
    line-height: 1.2; /* Ajustar la altura de la línea */
}

/* Estilo para las celdas */
#unitDataTable .tabulator-cell {
    padding: 6px; /* Reducir el padding para hacer las celdas más compactas */
    font-size: 12px; /* Asegurarse de que el tamaño de la fuente sea más pequeño */
}


/* Estilo para las filas alternas */
#unitDataTable .tabulator-row:nth-child(even) {
    background-color: #f9f9f9; /* Fondo alterno para filas */
}

/* Estilo para las celdas congeladas */
#unitDataTable .tabulator-frozen {
    background-color: #f4f4f4; /* Cambiar el fondo de las celdas congeladas */
}

/* Ajustes adicionales para hacerla más compacta */
.tabulator .tabulator-table {
    border-collapse: collapse; /* Hacer que las celdas estén más juntas */
}

.tabulator .tabulator-cell, .tabulator .tabulator-header {
    text-align: center; /* Centrar el texto en las celdas */
}

.tabulator .tabulator-cell[tabulator-field="alias"] {
    font-weight: bold;
    font-size: larger;
}



/* Modal más angosto para pantallas grandes */
#pdiTableModal .modal-dialog {
    max-width: 700px; /* Ajusta el tamaño máximo del modal */
    width: 90%; /* Ajusta el ancho para que ocupe el 90% de la pantalla */
}

/* Ajusta la altura del modal */
#pdiTableModal .modal-body {
    max-height: calc(100vh - 250px); /* Ajuste de altura para el modal */
    overflow-y: auto; /* Permitir desplazamiento vertical si es necesario */
}

/* Contenedor de la tabla */
#pdiDataTableContainer {
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    height: 100%; /* Hace que el contenedor ocupe todo el alto disponible */
    display: flex;
    flex-direction: column; /* Organiza la tabla de forma columnar */
}

/* Tabulator (dentro del contenedor) ocupará el 100% del espacio disponible */
#pdiDataTable {
    width: 100%; /* Ocupa todo el ancho disponible */
    height: 100%; /* Ocupa todo el alto disponible */
    overflow-x: auto; /* Habilita desplazamiento horizontal si la tabla excede el ancho */
    white-space: nowrap; /* Evitar que el contenido se rompa */
}

.tabulator .tabulator-cell[tabulator-field="name"], .tabulator .tabulator-cell[tabulator-field="id"] {
    font-weight: bold;
}


#tablaInsumos {
  font-size: 14px;
  min-height: 300px;
}

#tablaInsumos .tabulator {
  font-size: 10px;
}

#tablaInsumos .tabulator-cell {
  padding: 2px 4px;
  line-height: 1.2;
}

#tablaInsumos .tabulator-header .tabulator-col {
  padding: 2px 4px;
}

#tablaInsumos .wrap-text {
  white-space: normal !important;
  word-break: break-word;
}

.word-wrap {
  white-space: normal;   /* permite saltos de línea automáticos */
  word-wrap: break-word; /* compatibilidad vieja */
  overflow-wrap: break-word; /* estándar moderno */
}

.tabulator-row.tabulator-selected {
  background-color: #cce5ff !important;
}

.notif-card,
.option-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notif-card:hover,
.option-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid #0d6efd; /* azul Bootstrap */
}


#tablaNotificaciones .tabulator-cell {
  font-weight: normal !important;
  font-size: 14px !important;
}


.tabulator, #map {
  content-visibility: visible !important;
}

.splash-logo {
  animation: spin 4s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.geotrafico-row {
  font-size: 0.85rem;
  transition: background-color 0.3s;
  cursor: pointer;
}

.blink-soft {
  animation: blink 1.8s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.progress-bar {
  color: #fff;
  font-weight: bold;
  text-align: center;
}



.overlay-reporte {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;           /* blanco limpio */
  color: #212529;             /* texto Bootstrap estándar */
  z-index: 2000;              /* bien arriba de tabs */
  display: flex;
  flex-direction: column;
  border: 1px solid #dee2e6;  /* borde sutil */
  border-radius: 0.5rem;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}


.overlay-header {
  padding: 0.5rem 1rem;
  background: #f8f9fa;         /* gris claro de Bootstrap */
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.overlay-body {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
}

.card {
  font-size: 0.85rem; /* más compacto */
}
.card small {
  font-size: 0.75rem;
  color: #6c757d;
}

.reporte-item {
  font-size: 13px;
  line-height: 1.2em;
  min-height: 48px; /* asegura altura mínima para que se vea la barra */
}

.reporte-item > div:first-child {
  min-height: 100%; /* la barra de estado ocupa toda la altura */
}

.reporte-item:hover {
  background-color: #f1f7ff !important;
}



/*******************************************/

/* =========================
   MENÚ PRINCIPAL
========================= */
.menu-dropdown {
  display: none;              /* Oculto por defecto (lo abre el botón hamburguesa con JS) */
  position: absolute;
  top: 56px;                  /* Debajo del menú superior */
  left: 0;
  background-color: #343a40;
  color: white;
  width: 200px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1002;              /* Encima del resto del contenido */
}

.menu-dropdown a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.menu-dropdown a:hover {
  background-color: #495057;
}

/* =========================
   SUBMENÚS
========================= */
.submenu {
  display: none;              /* Oculto por defecto */
  position: absolute;
  top: 0;                     /* Por defecto alineado al padre */
  left: 100%;                 /* Se abre a la derecha */
  background-color: #495057;
  color: white;
  width: 200px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1003;              /* Encima del menú principal */
}

.submenu a {
  padding: 10px;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.submenu a:hover {
  background-color: #6c757d;
}

/* Flecha indicadora para los que tienen submenú */
.menu-dropdown a.menu-item-with-submenu::after {
  content: "\f105";           /* Flecha hacia la derecha */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 10px;
}

/* Cuando el submenú está activo */
.submenu.show {
  display: block;
}


/* =========================
   BARRA LATERAL FIJA (≥1025px)
   - Sidebar fijo 60px (solo íconos)
   - Tabla flotante corre a la derecha
   - Mapa se ajusta dinámicamente
========================= */
@media (min-width: 1200px) {

  /* Sidebar fijo */
  #menu-dropdown {
    display: flex !important;      
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    top: 56px;                     
    left: 0;
    bottom: 0;
    width: 60px;                   
    background-color: #343a40;
    /* box-shadow: 2px 0 5px rgba(0,0,0,0.2); */
    z-index: 1002;                 
    padding-top: 10px;
  }

  /* Ítems del sidebar: íconos centrados */
  #menu-dropdown a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;        /* espaciado mayor en desktop */
    color: #fff;
    text-decoration: none;
  }

  #menu-dropdown a i { font-size: 18px; }
  #menu-dropdown a span.label { display: none; } /* oculta texto */

  /* Quitar la flecha > de los submenús */
  #menu-dropdown a.menu-item-with-submenu::after {
    content: none !important;
  }

  /* Submenús: aparecen a la derecha del sidebar */
  #menu-dropdown .submenu {
    position: absolute;
    left: 60px;
    width: 200px;
    background-color: #495057;
    text-align: left;
  }

  #menu-dropdown .submenu a {
    display: block;
    padding: 10px 15px;
    text-align: left;
    justify-content: flex-start; 
  }

  /* Ocultar botón hamburguesa */
  #menu-toggle {
    display: none !important;
  }

  /* Tabla flotante alineada después del sidebar */
  #floating-table {
    left: 60px;                    
    width: 400px;                  
  }

  /* Mapa con tabla visible: 60 (sidebar) + 400 (tabla) */
  #map {
    margin-left: 460px;
    width: calc(100% - 460px);
  }

  /* Mapa cuando la tabla está colapsada */
  #map.map-expanded {
    margin-left: 60px !important;
    width: calc(100% - 60px) !important;
  }
}


/* Estilo para resaltar la fila activa */
/* Aplica solo al último span dentro de una fila activa */
.geofence-active span:last-of-type::after {
  content: "●";
  color: #28a745;   /* verde */
  font-size: 12px;
  margin-left: 6px;
}

.georuta-active span:last-of-type::after {
  content: "●";
  color: #28a745;   /* verde */
  font-size: 12px;
  margin-left: 6px;
}

.ts-dropdown {
  z-index: 2000 !important;
}


/* Control principal de Tom Select */
#buscadorGlobal + .ts-wrapper .ts-control {
  min-height: 36px !important;   /* altura fija (ajusta según tu diseño) */
  height: 36px !important;       /* bloquea crecimiento */
  max-height: 36px !important;
  overflow: hidden !important;   /* evita que contenido extra expanda */
  display: flex;
  align-items: center;
}

/* Item seleccionado dentro del input */
#buscadorGlobal + .ts-wrapper .ts-control .item {
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* si el texto es largo, pone "..." */
  margin: 0;
  padding: 0 6px;
}

.highlight-row {
  background-color: #ffeeba !important;
  transition: background-color 1s ease;
}


/*==================================*/

#maintenanceList {
  display: flex;
  flex-direction: column;
  align-items: center;  /* 🔹 Centrar las tarjetas */
  gap: 12px;
  padding: 10px;
}

.mtto-card {
  width: 98%;
  max-width: 600px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-size: 14px;
}

.mtto-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mtto-unit {
  font-weight: bold;
  color: #343a40;
  font-size: 16px;
}

.btn-mtto {
  background: #007bff;
  border: none;
  color: white;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-mtto:hover {
  background: #0056b3;
}

.mtto-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mtto-service {
  font-weight: 500;
  color: #333;
}

.mtto-info span,
.mtto-extra span {
  display: block;
  margin-top: 3px;
  color: #555;
  font-size: 13px;
}

.mtto-service {
  font-weight: bold;
  color: #ffffff; /* 🔴 Rojo llamativo */
  font-size: 15px;
}

.service-text {
  margin-left: 5px;
}

.mtto-info {
  margin-top: 5px;
  font-size: 13px;
  color: #666;
}

.mtto-extra {
  margin-top: 8px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #444;
}

.mtto-card {
  line-height: 1.2;         /* Reduce la altura de línea */
  font-size: 14px;          /* Texto más compacto */
  padding: 0.5rem 0.75rem;  /* Ajusta padding interno */
}

.mtto-card .mtto-header {
  margin-bottom: 0.3rem;    /* Menos espacio debajo del encabezado */
}

.mtto-card .mtto-info,
.mtto-card .mtto-extra {
  margin-top: 0.2rem;       /* Compacta separación arriba */
}

.mtto-card .mtto-extra span {
  margin-right: 0.5rem;     /* Menor separación horizontal */
}

.badge-servicio {
  background-color: #e6a160; /* Bootstrap Warning (naranja) */
  color: #fff;
  font-weight: 600;
}

.geojson-panel {
  max-width: 600px;
  transition: all 0.3s ease-in-out;
}

#geojson-slider .noUi-base {
  background: linear-gradient(90deg, #ccc, #ddd);
  height: 6px;
  border-radius: 6px;
}

#geojson-slider .noUi-connect {
  background: #4e73df; /* Azul más moderno */
}

#geojson-slider .noUi-handle {
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4e73df;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

#geojson-info {
  line-height: 1.0;
}


#video-container canvas {
  object-fit: contain;
  max-width: 100%;
  height: auto !important;
}



/* Ocultar completamente elementos sin permiso */
.perm-hidden {
  display: none !important;
  visibility: hidden !important;
}

/* (Opcional) modo desactivado */
.perm-disabled, .perm-disabled * {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(60%);
  user-select: none;
}

/* (Opcional) animación suave al ocultar */
.perm-hidden {
  animation: fadeOut 0.3s ease-in-out;
}
@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.97); }
}

#reporteGpsBody #reporteOverlay {
  overflow-x: hidden;
}


/* Oculta la flecha de orden de la primera y última columna */
#tablaMtto .tabulator-col:first-child .tabulator-arrow,
#tablaMtto .tabulator-col:last-of-type .tabulator-arrow {
  display: none !important;
}

#btnAgruparInsumo.active {
  background-color: #ffc107 !important; /* amarillo tipo “advertencia” */
  color: #212529 !important;            /* texto oscuro */
  border-color: #e0a800 !important;
  font-weight: 600;
}