:root{
    --primary-color:#3bc0c3;
    /* El color de marca (--sgi-color, --sgi-color-rgb, derivados e --isis-color)
       se define UNA sola vez en style.css, que SIEMPRE se carga antes que este
       archivo. No lo repitas aquí: cámbialo solo en style.css. */
}
/*** Aside Collapsed ***/
@media (min-width: 769px) {
  aside.left-panel.collapsed {
    width: 85px;
    text-align: center;
  }

  aside.left-panel.collapsed + .content {
    margin-left: 85px;
  }

  aside.left-panel.collapsed .user .user-login,
aside.left-panel.collapsed span.nav-label {
    display: none;
  }

  aside.left-panel.collapsed .navigation > ul > li > a {
    padding: 20px;
  }

  aside.left-panel.collapsed i.fa {
    font-size: 22px;
  }

  aside.left-panel.collapsed .navigation > ul > li.has-submenu:after {
    display: none;
  }
}

/*** Aside Collapsed Sub Menu ***/
@media (min-width: 769px) {
  aside.left-panel.collapsed .navigation ul li ul {
    position: absolute;
    z-index: 3;
    left: 100%;
    top: 0px;
    background-color: var(--isis-color);
    box-shadow: none;
    padding: 10px 0px;
    min-width: 200px;
    /* El submenú se mantiene SIEMPRE en el DOM y se controla con
       visibility/opacity (no display) para poder aplicar un retardo al
       ocultar. Así, si el mouse sale un instante al moverse en diagonal
       del ícono hacia un hijo, el submenú no se cierra de golpe. */
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease, visibility 0.1s ease;
    transition-delay: 0.15s;   /* gracia de 0.15s al ocultar */
  }

  /* Puente invisible pegado al borde izquierdo del submenú: cubre solo la
     franja de separación entre el ícono y el submenú (no todo el sidebar,
     para no tapar los íconos de abajo). Al ser hijo del <ul>, mantener el
     mouse aquí conserva el submenú abierto durante la diagonal. */
  aside.left-panel.collapsed .navigation ul li ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    height: 100%;
  }

  aside.left-panel.collapsed .navigation > ul > li:hover > ul {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;   /* aparece de inmediato */
  }

  aside.left-panel.collapsed .navigation ul li ul li a {
    border: 0px;
    color: #ffffff;
    padding: 8px 25px 8px 40px;
  }

  aside.left-panel.collapsed .navigation ul li ul li a:hover {
    color: #fff;
  }
}
@media (max-width: 768px) {
    
    
    
  aside.left-panel.collapsed {
    width: 250px;
    left: 0px;
    overflow: hidden !important;
  }

  /* Menú lateral abierto: el contenido se corre 250px a la derecha.

     Se hace con `left`, NO con `transform`. Un `transform` sobre un elemento lo
     convierte en el marco de referencia de todo `position: fixed` que tenga
     dentro, y los modales viven dentro de .content: con el menú abierto se iban
     250px a la derecha junto con la página y quedaban cortados contra el borde
     de la pantalla, en vez de mantenerse quietos y centrados sobre la ventana.
     `position: relative` no crea ese marco de referencia, así que el modal
     vuelve a medirse contra la ventana.

     El desplazamiento no está animado (nunca lo estuvo: las dos líneas
     `-moz-transition`/`-o-transition` que había aquí llevaban un valor de
     transform y el navegador las descartaba), así que no se pierde nada. */
  aside.left-panel.collapsed + .content {
    margin-left: 0px;
    position: relative;
    left: 250px;
  }

  aside.left-panel {
    left: 100%;
  }

  section.content {
    margin-left: 0px;
  }

  .content > .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-header h1 {
    margin-top: 0px;
  }
}

@media (max-width: 450px) {

  .username {
		display: none;
	}
	.dropdown .extended i {
		display: none;
	}
}