/* ==========================================================================
   HOJA DE ESTILOS PRINCIPAL - SCADA / IOT SPACE APPLICATION
   ========================================================================== */

/* ==========================================================================
   1. BARRA LATERAL (SIDEBAR BASE)
   ========================================================================== */

/* Contenedor estructural principal del menú de navegación lateral */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 220px; /* Ancho en estado expandido */
    background: #343a40;
    color: #fff;
    transition: all 0.3s ease-in-out;
    overflow-y: auto;   /* Permite scroll vertical interno si los enlaces exceden la pantalla */
    overflow-x: hidden; /* Evita desbordamiento horizontal accidental */
    z-index: 1000;      /* Garantiza que se posicione por encima del contenido principal */
}

/* Personalización y modernización de la barra de desplazamiento interna del sidebar */
.sidebar::-webkit-scrollbar {
    width: 5px;
}
.sidebar::-webkit-scrollbar-track {
    background: #343a40;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: #495057;
    border-radius: 4px;
}

/* Enlaces generales de navegación del menú */
.sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #ced4da;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap; /* Evita que el texto de los enlaces haga saltos de línea */
}

/* Efecto Hover sobre los enlaces del menú principal */
.sidebar ul li a:hover {
    background: #495057;
    color: #fff;
}

/* Ajustes estandarizados para los iconos de Bootstrap Icons dentro del menú */
.sidebar ul li a i {
    margin-right: 12px;
    font-size: 1.1rem;
    min-width: 25px;   /* Cuadrícula fija para garantizar que los iconos se alineen verticalmente */
    text-align: center;
}

/* ==========================================================================
   2. ACCESIBILIDAD, CONTROL DE SELECCIÓN Y CURSORES
   ========================================================================== */

/* Capa de experiencia de usuario: Bloquea el cursor de texto e impide selecciones accidentales */
.sidebar, 
.sidebar ul li a, 
.submenu-toggle, 
.link-text {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    outline: none !important; /* Elimina el recuadro estético de enfoque al hacer clic */
}

/* Forzar cursor tipo mano (pointer) en elementos interactivos de la navegación */
.sidebar a, 
.submenu-toggle {
    cursor: pointer !important;
}

/* Remueve el sombreado azul nativo si el navegador intenta forzar una selección */
.sidebar a::selection, 
.sidebar span::selection {
    background: transparent;
}

/* ==========================================================================
   3. SUBMENÚS (LÓGICA ACORDEÓN)
   ========================================================================== */

/* Contenedor colapsable para sub-items. Su despliegue es controlado dinámicamente por JS */
.submenu {
    display: none; 
    background: #2c3136; /* Tonalidad más oscura para generar jerarquía visual */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Enlaces internos pertenecientes al submenú desplegado */
.submenu li a {
    padding: 8px 20px 8px 52px !important; /* Identación profunda a la derecha de los iconos */
    font-size: 0.85rem;
    color: #adb5bd;
}

/* Efecto hover suavizado exclusivo para sub-items */
.submenu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Icono indicador de expansión (Flecha de navegación en acordeón) */
.bi-chevron-down {
    font-size: 0.7rem;
    transition: transform 0.3s;
}

/* Rotación mecánica de la flecha cuando el submenú pasa a estar activo */
.submenu-toggle.active .bi-chevron-down {
    transform: rotate(180deg);
}

/* ==========================================================================
   4. ESTADOS COMPACTOS / COLAPSADOS (ESCRITORIO / DESKTOP)
   ========================================================================== */

/* Reducción del ancho del sidebar al activar el modo colapsado */
.sidebar.collapsed {
    width: 65px;
}

/* Oculta textos y flechas para mantener únicamente visibles los iconos del menú */
.sidebar.collapsed .link-text,
.sidebar.collapsed .bi-chevron-down {
    display: none !important;
}

/* Capa de protección: Fuerza el cierre visual de submenús abiertos al colapsar */
.sidebar.collapsed .submenu {
    display: none !important;
}

/* Centrado estético y escalado de los iconos en modo barra de herramientas compacta */
.sidebar.collapsed ul li a i {
    margin-right: 0;
    font-size: 1.3rem;
}

/* ==========================================================================
   5. CONTENEDOR DE CONTENIDO PRINCIPAL (VIEWPORT)
   ========================================================================== */

/* Margen izquierdo dinámico para que el contenido no se oculte detrás del sidebar fijo */
.content {
    margin-left: 220px; /* Sincronizado con el ancho base expandido del sidebar */
    transition: margin-left 0.3s ease-in-out;
    min-height: 100vh;
    background-color: #f8f9fa;
}

/* Selector de hermano general (tilde ~): Reduce el margen al colapsar la barra lateral */
.sidebar.collapsed ~ .content {
    margin-left: 65px; /* Sincronizado con el ancho compacto de la clase .collapsed */
}

/* ==========================================================================
   6. RESPONSIVE DESIGN (MÓVILES < 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    
    /* Modificamos el sidebar para que actúe como un menú desplegable lateral oculto */
    .sidebar {
        left: -260px;          /* Escondido por completo hacia la izquierda */
        width: 250px;
        top: 60px;             /* Empieza justo debajo de la barra móvil */
        height: calc(100vh - 60px); 
        transition: left 0.3s ease-in-out;
        position: fixed;
    }

    /* Trae de vuelta el menú deslizándolo al activar la clase .show vía JS */
    .sidebar.show {
        left: 0 !important;
    }

    /* Rompe el margen lateral en móviles y compensa la altura de la barra superior fija */
    .content {
        margin-left: 0 !important;
        padding-top: 75px !important; /* Espacio de cortesía para que la barra móvil no tape el contenido */
    }

    /* Telón translúcido de fondo para enfocar el menú y bloquear interacciones traseras */
    body.overlay-active::after {
        content: '';
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999; /* Posicionado un nivel abajo de .sidebar (1000) */
    }

    /* Protección visual: Asegura la lectura del texto en menús móviles */
    .sidebar .link-text {
        display: inline-block !important;
    }
}
/* ==========================================================================
   7. AJUSTES PARA TABLETS (MEDIA QUERY ADICIONAL PARA ESCALADO ALTERNATIVO)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Bloque libre para inyectar un estado colapsado por defecto si se requiere en pantallas medianas */
}

/* ==========================================================================
   8. COMPONENTES VISUALES SCADA (TARJETAS / MEDIDORES GAUGES)
   ========================================================================== */

/* Contenedores de diseño (Cards) específicos para el módulo de medidores en tiempo real */
.card-gauge {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background: #ffffff;
    transition: transform 0.2s, background-color 0.3s ease; /* Soporta animaciones para las alarmas modulares */
}

/* Efecto de elevación tridimensional (Lift) suave al posicionar el cursor */
.card-gauge:hover {
    transform: translateY(-2px);
}