:root{
  --nav_w_neg: -300px;
  --nav_w: 300px;
}

/* Color bordó institucional de ejemplo */
#mn_vw_box .bg_maroon {
  background-color: #721c24; /* Ajústalo a tu tono exacto */
}

/* --- CONFIGURACIÓN PARA MÓVILES (Por defecto) --- */
#mn_vw_box .sidebar-menu {
  position: fixed;
  top: 0;

  left: var(--nav_w_neg);
  min-width: var(--nav_w);
  width: var(--nav_w);
  max-width: var(--nav_w);
  /*
  width: 280px;
  */
  height: 100vh;
  z-index: 1050; /* Por encima de la cabecera y el ng-view */
  box-shadow: -2px 0 10px rgba(0,0,0,0.3);
  transition: left 0.3s ease-in-out; /* Animación suave de salida/entrada */
}

.cteBOX .mn_hamb {
  left: 0;
  width: 100%;
  border-bottom: 5px solid #666;
  background: #f1e6dcaa;

  z-index: 1049;
}

/* Clase dinámica que activa AngularJS */
#mn_vw_box .sidebar-menu.mn_open {
  left: 0; /* Se desliza hacia adentro */
}

/* Capa de fondo oscura para el resto de la pantalla en móvil */
#mn_vw_box .sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

#mn_vw_box .sidebar-overlay.mn_active {
  opacity: 1;
  visibility: visible;
}

#mn_vw_box .sidebar-menu .nav-link:hover {
  background: rgba(255,255,255,0.1);
}

#mn_vw_box .nw_titOpcMenuLat{
  margin-bottom: 10px;
}

#mn_vw_box .nv_opc_prin{
  margin-bottom: 5px;
}

#mn_vw_box .nv_opc_prin ul{
  list-style-type: none;
  padding: 5px;
}

/*
#mn_vw_box .nv_opc_prin ul .nv_opc_1{
  padding: 0 !important;
}
*/

#mn_vw_box .nv_opc_normal{
  background: var(--zz_normal_opc_bg_alfa) !important;
}

#mn_vw_box .nv_opc_actual{
  background: var(--zz_actual_alfa) !important;
}

#mn_vw_box .nv_opc a{
  width: 100%;
  text-decoration: none;
  color: #fff;
  padding: 8px 5px 3px 5px;
  border-bottom: 2px solid #f005;
  text-align: left;
  transition: all 0.3s;
  line-height: 18px;
}

#mn_vw_box .nv_opc a:hover{
  padding-left: 15px;
}
#mn_vw_box .nv_opc_normal a:hover{
  background: var(--zz_normal_hover_opc_bg);
  border-bottom: 2px solid var(--zz_normal_hover_opc_bor);
}
#mn_vw_box .nv_opc_actual a:hover{
  background: var(--zz_actual_hover_opc_bg);
  border-bottom: 2px solid var(--zz_actual_hover_opc_bor);
}

#mn_vw_box .nv_opc_activoNormal a{
  background: var(--zz_normal_activo_opc_bg);
  border-bottom: 2px solid var(--zz_normal_activo_opc_bor);
}
#mn_vw_box .nv_opc_activoActual a{
  background: var(--zz_actual_activo_opc_bg);
  border-bottom: 2px solid var(--zz_actual_activo_opc_bor);
}

#mn_vw_box .nv_opc_instNormal{
  border-bottom: 3px solid var(--zz_normal_bor);
}
#mn_vw_box .nv_opc_instActual{
  border-bottom: 3px solid var(--zz_actual_bor);
}

#mn_vw_box .nw_btnDown .btn{
  border: 1px solid transparent;
  transition: all 0.3s;
}

#mn_vw_box .nw_btnDown .btn:nth-child(1){
  /*
  border-color: var(--zz_bg_cafe_03);
  color: var(--zz_bg_cafe_03);
  */
}

#mn_vw_box .nw_btnDown .btnInst{
  background: #e2fbfa;
  color: #005558;
  border: 1px solid  #008e93;
}

#mn_vw_box .nw_btnDown .btnInst:hover{
  background: #005558 !important;
  color: #defffe !important;  
}


#mn_vw_box .nv_opc_instNormal .nw_btnDown .nw_btnFin{
  border-color: var(--zz_normal_bor);
  color: var(--zz_normal);
}
#mn_vw_box .nv_opc_instActual .nw_btnDown .nw_btnFin{
  border-color: var(--zz_actual_bor);
  color: var(--zz_actual);
}

#mn_vw_box .nw_btnDown .btn:nth-child(1):hover{
  background: var(--zz_bg_cafe_03);
}

#mn_vw_box .nv_opc_instNormal .nw_btnDown .nw_btnFin:hover{
  background: var(--zz_normal);
}
#mn_vw_box .nv_opc_instActual .nw_btnDown .nw_btnFin:hover{
  background: var(--zz_actual);
}


#mn_vw_box .nw_btnDown .btn:hover{
  color: #fff !important;
}



/* --- CONFIGURACIÓN PARA ESCRITORIO (Tablets grandes y PC) --- */
@media (min-width: 768px) {
    #mn_vw_box .sidebar-menu {
      position: relative;
      top:0;
      left: 0 !important; /* Siempre visible */
      /*
      width: 260px;
      */
      height: 100%;
      box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    }

    /* En escritorio el contenedor de Angular y el Sidebar se alinean en fila */
    #mn_vw_box {
      display: flex !important;
      flex-direction: row;
    }
}